Hello! 👋 😊
Today I want to show you a simple animated progress bar that I recently made in React.
Before we start, I would highly recommend you to check out runnable example for the solution on our website:
React - create simple animated progress bar
Below I present you my solution for a simple progress bar with some styling 📊🎨.
In this solution I use:
-
useState
hook to store the progress bar's state, - content
width
measured in percents according to the container - that trick lets us display progress from 0% to 100% in an easy way, - some example buttons that trigger
setProgress()
method to demonstrate how the progress bar works (animation between switching has a nice effect).
Practical example:
import React from 'react';
const containerStyle = {
border: '1px solid silver',
background: '#ededed'
};
const contentStyle = {
background: '#00cc00',
height: '24px',
textAlign: 'center',
lineHeight: '24px',
fontFamily: 'sans-serif',
transition: '0.3s'
};
const ProgressBar = ({progress}) => {
const state = `${progress}%`;
return (
<div style={containerStyle}>
<div style={{...contentStyle, width: state}}>
{progress > 5 ? state : ''}
</div>
</div>
);
};
const App = () => {
const [progress, setProgress] = React.useState(25);
return (
<div>
<ProgressBar progress={progress} />
<br />
<div>
<button onClick={() => setProgress(0)}>0%</button>
<button onClick={() => setProgress(5)}>5%</button>
<button onClick={() => setProgress(15)}>15%</button>
<button onClick={() => setProgress(50)}>50%</button>
<button onClick={() => setProgress(75)}>75%</button>
<button onClick={() => setProgress(100)}>100%</button>
</div>
</div>
);
};
export default App;
You can run this example here
Let me know what you think in the comment section! 😊💬
Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on dirask.com -> Questions
Top comments (4)
This is very nice, something cool you could add is the progressbar role from ARIA.
Something like this.
This little change means screen readers now know what's going on within the component.
Will do! Thanks for the tips. 😊🔥
Nice and simple!
I think it might be even better if you used the HTML element instead!
Then your code is semantically correct too :-)
developer.mozilla.org/en-US/docs/W...
Nice, nothing complicated straight to the point