DEV Community

Cover image for Circular Progress Bar using HTML and CSS

Circular Progress Bar using HTML and CSS

Shantanu Jana on October 19, 2021

Circular Progress Bar is a popular web element that is mainly used on business or personal websites. If you want to create a circular progress bar ...
Collapse
 
alvaromontoro profile image
Alvaro Montoro

Alternatively, you could use a conic gradient: it would simplify the HTML and the CSS. At it can be animated with @property (although only on Chromium for now):

Collapse
 
wormius51 profile image
Eyal Hazor

This is great. I really appreciate the answer you gave here. I was looking at how to do this and I think I found a few ways. This one is the least hacky though. I appreciate the post here too. But I think your answer is better.

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
zodiapps profile image
Adam Alfredsson

That isn't true, it has still quite limited browser support.

developer.mozilla.org/en-US/docs/W...

Thread Thread
 
elijahtrillionz profile image
Elijah Trillionz

Double checked, you're correct

Collapse
 
ellaray7 profile image
Ellaray7

While I tried to design the progress bar It's giving error do you know why? sort de separation

Collapse
 
shantanu_jana profile image
Shantanu Jana
Collapse
 
ellaray7 profile image
Ellaray7

Thank you @shantanu

Collapse
 
rahulahire profile image
Rahul Ahire

I want to know that wouldn't it be easier to make a vector svg in Illustrator and then try to animate it with JavaScript?

Collapse
 
bryndille profile image
Bryndille1701

I would personally use something like Alvaro proposed, or a SVG element (see how the progress circle is made on the Twitter website, it's clever and easy to implement).

Collapse
 
t0nghe profile image
Tonghe Wang

Oh, thanks for the info. Let me go check out how twitter does it.

Collapse
 
doublejosh profile image
-✁-- ɥsoɾǝlqnop --- • Edited

This is definately a very clever solution but its very difficult to scale down to the size of an icon because of all the sizing in CSS. Any advice on how to tackle that math puzzle?