DEV Community

Cover image for React - create simple animated progress bar
Dirask-React
Dirask-React

Posted on • Originally published at dirask.com

React - create simple animated progress bar

#react #webdev #javascript #tutorial

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

Final effect of this post:
image

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;
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
link2twenty profile image
Andrew Bone •

This is very nice, something cool you could add is the progressbar role from ARIA.

Something like this.

const ProgressBar = ({progress}) => { const state = `${progress}%`; return ( <div role="progressbar" aria-valuenow={progress} aria-valuemin="0" aria-valuemax="100" style={containerStyle} > <div style={{...contentStyle, width: state}}> {progress > 5 ? state : ''} </div> </div> ); };
Enter fullscreen mode Exit fullscreen mode

This little change means screen readers now know what's going on within the component.

Collapse
 
diraskreact profile image
Dirask-React •

Will do! Thanks for the tips. 😊🔥

Collapse
 
thomasledoux1 profile image
Thomas Ledoux •

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...

Collapse
 
ngwanevic profile image
Code Junkie •

Nice, nothing complicated straight to the point