Circular Progress Bar Using SVG | HTML | CSS | JS

Let's learn how to create a SVG circular progress bar using HTML, CSS and few lines of JavaScript code. Don't forget to like, share and subscribe if you found the video helpful.

Other videos from this channel:

Source code:

[brt]

It took me a few days to find a reasonable tutorial explaining how to make a circular progress bar. Thanks a lot mate!

[MKG]

Great video. Very simple and easy to understand. Keep up the good work. Looking forward to see more tutorials from you.

[acobster]

If you set the pathLength attribute on your circle element to "100" and set progress circle's dynamic stroke-dasharray to `${percent} 100`, you don't need to worry about the complex math with circumference & pixels. Just use the straight percent and SVG will figure out the length in pixels for you.

[zamanEhsani]

helped me alot. what i was looking for. Thanks alot!!!

[ihsannuruliman]

this is really nice, even though looks very tricky, but what is not tricky is css? XD

[ahanabhabibfahad]

Thank's a lot for the simplified /easy code for progress bar. can i know your vscode light theme name?

[medooegy]

thanks for the great work, the simplest explanation ever for svg Circular Progress. but if i need to add percentage counter in the middle how could i do that?

[zamanEhsani]

how to animate to fill the strok dash? like the percentage from 0 to 60% to be filled?

[prantoroy]

Thanks for this tutorial. I am trying to make multiple progress bars but it's showing an error. Would you please help me?

[locky]

firstly, Thank you for your effort.But I am still struggling. I write the same code as you do but still I don't get the result. It shows always 100%