DEV Community

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

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
Collapse
 
jastuccio profile image
jastuccio • • 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;
Enter fullscreen mode Exit fullscreen mode

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

MDN - progressbar_role

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

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

Collapse
 
jastuccio profile image
jastuccio •

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 🤦‍♂️

Collapse
 
ksankakovsh profile image
Ksanka •

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

Collapse
 
jameshubert_com profile image
James Hubert •

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!

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

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!

Collapse
 
karem1986 profile image
Karem •

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!

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

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?

Collapse
 
karem1986 profile image
Karem • • Edited

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

Collapse
 
ohoroyoi profile image
ohoroyoi •

this tutorial is fun thanks

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

Thanks;)

Collapse
 
luismy2227 profile image
luismy2227 •

I loved, thanks!

Collapse
 
niyongaboeric profile image
NiyongaboEric •

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

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

You are very welcome!

Collapse
 
shazena profile image
shazena •

This was amazing! Thank you so much!!

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

Thank you!

Collapse
 
izmarsel profile image
izmarsel •

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

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

Happy that it was useful for you!

Collapse
 
ignore_you profile image
Alex •

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

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

Thank you! Happy to help!

Zhyve vechna!!!

Collapse
 
hibaalaani profile image
Hiba Alaani •

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

Collapse
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

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

Collapse
 
hibaalaani profile image
Hiba Alaani • • 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..

Thread Thread
 
ramonak profile image
Katsiaryna (Kate) Lupachova •

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