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:
/ @uicode
theuicode.com
/ theuicode
Source code:
github.com/ui-...

[@b4rt009]

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

[@UICode]

Glad I could help!🙌

[@M1989KG]

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

[@UICode]

Milos Mladenovic Glad you liked

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

[@UICode]

Thanks for that tip, I wasn't aware. I'll try that out😃

yo acobster thank you for the tip!! all these people and you are the only one with the best solution

[@zamanEhsani]

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

[@UICode]

Glad it helped!

[@CodeingWithManoj]

great video

[@ihsannuruliman4005]

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

[@medooegy5263]

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?

[@UICode]

Thanks. Just wrap svg with another div or span to show the value in the middle. Here's the gist: gist.github.com/ui-code/c9f8609010369c880648e217c4c17d0c

[@medooegy5263]

@@UICode thank you so much

[@ahanabhabibfahad7271]

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

[@UICode]

Thank you. The theme is FlatUI : marketplace.visualstudio.com/items?itemName=lkytal.FlatUI

[@webmaker_studio]

Thanks

[@zamanEhsani]

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

[@UICode]

Just add transition property and make little change in the code. It will work. I have quickly updated the code for you. Check it out: gist.github.com/ui-code/c031581536867e8b8968f134d02989fb

[@prantoroy2359]

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

[@UICode]

You need to create a reusable component by using this code and use it multiple times as you need. Which framework are you using?

[@MTrof]

probably instead of querySelector, you should use querySelectorAll and go through a loop

[@locky916]

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%

[@UICode]

Hey..check out the link to source code in the description. You can correct it by referring the code.

[@chitrabanoth7792]

how to write 50% inside the circle

[@UICode]

Check out this updated gist : gist.github.com/ui-code/c9f8609010369c880648e217c4c17d0c

[@chitrabanoth7792]

thank you

[@chitrabanoth7792]

in this shall we add three to four circular progress at once

[@TraceguyRune]

Make a half circle guide

[@vanshitasingh6251]

How can we make this responsive?

[@UICode]

Use media queries or responsive libraries like tailwind css or bootstrap.