DEV Community

React: How to create a custom progress bar component in 5 minutes

Katsiaryna (Kate) Lupachova on April 08, 2020

Originally posted on my personal blog A couple of days ago, while working on one of React projects with the use of a very popular UI library, I’ve...

Read full post

jastuccio • Mar 20 '21 • Edited

Nice progress bar. I am stuck passing props in a progress bar I am working on and may have found my solution in this example.

I think this one has some accessibility issues though. I'm a noob, but going to take a shot at the code based on step 3. This may not be right.

const ProgressBar = (props) => {
  const { bgcolor, completed } = props;

// styles...

  return (
    <div style={containerStyles}>
      <div style={fillerStyles}>
        <span
            style={labelStyles}>{`${completed}%`}
            role="progressbar"
            aria-valuenow=${completed}
            aria-valuemin="0"
            aria-valuemax="100"
       >
      </span>
      </div>
    </div>
  );
};

export default ProgressBar;

MDN <progress> can be hard to style so we are using the progress role instead.

MDN - progressbar_role

Katsiaryna (Kate) Lupachova • Mar 21 '21

Thank you for pointing this out! The component was written without accessibility at all. I should definitely correct this!

jastuccio • Mar 22 '21

You're welcome. I think most of us learned HTML and CSS without accessibility as part of the code. I know I did. Accessibility was required for the progress bar I was building or I probably would not have thought to include it 🤦‍♂️

James Hubert • Feb 17 '21

Hey just shouted you out in my recent dev.to post because I used your progress bar design: dev.to/jwhubert91/project-47-of-10...

Thanks again and please keep making these great tutorials!

Katsiaryna (Kate) Lupachova • Feb 18 '21

Thank you very much, James!
And you are doing a great job on developing 100 React.js projects! Looking forward to reading about your next project!

Ksanka • Sep 7 '23

Thank you so much, Kate! Your artticle helped me a lot! =***

Karem • Jun 30 '21

Nice article! it helped me to build a custom bar for work. How would you advice/recommend to make it in a way that the colors are filled dynamically instead of hardcoding it? junior developer so I appreciate very much your guidance!

Katsiaryna (Kate) Lupachova • Jul 3 '21

Glad that this blog post helped you!

To change a color of a bar dynamically just pass it as a prop or use it as a state variable. To be more specific could you please provide a code snippet where you have this problem?

Karem • Jul 5 '21 • Edited

Thank you Katsiaryna:) I fixed it by passiing in the div the 'background' property set to item.color (using these as props:)

ohoroyoi • Aug 7 '20

this tutorial is fun thanks

Katsiaryna (Kate) Lupachova • Aug 10 '20

Thanks;)

luismy2227 • Aug 26 '21

I loved, thanks!

NiyongaboEric • Feb 21 '21

With your help I was able to edit and write a custom progress bar I wanted. Thanks

Katsiaryna (Kate) Lupachova • Feb 23 '21

You are very welcome!

shazena • Jan 26 '21

This was amazing! Thank you so much!!

Katsiaryna (Kate) Lupachova • Feb 2 '21

Thank you!

izmarsel • Oct 1 '20

Thanks!! Used and modified your component. Really cool stuff!! Very useful for a personal project.

Katsiaryna (Kate) Lupachova • Oct 3 '20

Happy that it was useful for you!

Alex • Aug 13 '20

Thanks for this article, it helped me during building my own progress bar. Zhyve Belarus!

Katsiaryna (Kate) Lupachova • Aug 14 '20

Thank you! Happy to help!

Zhyve vechna!!!

Hiba Alaani • Sep 14 '20

Thanks for this article,,,But how can i use the transition for the three progress ?

Katsiaryna (Kate) Lupachova • Sep 15 '20

Hi Hiba! Could you please clarify what exactly are you trying to achieve? What do you mean by "three progress"? Sorry, I don't understand

Hiba Alaani • Sep 15 '20 • Edited

Thanks for your replay....I was trying to make the progress have that transition but at beginning it doesn't work but then it's worked..
But Actually I have a question how can i calculate the co2 emissions by vanilla js is there any tutorial for that..

Katsiaryna (Kate) Lupachova • Sep 15 '20

Glad that the transition worked! As for the co2 emissions, sorry, but I can't help