CSS Progress Circle

html css progress-bar progress css-shapes
Adam GunShy Said picture Adam GunShy Said · Jan 8, 2013 · Viewed 373.4k times · Source

I have searched this website to find progress bars, but the ones I have been able to found show animated circles that go to the full 100%.

I would like it to stop at certain percentages like in the screenshot below. Is there any way I can do that using only CSS?

Circular progress bars

Answer

andsens picture andsens · Mar 9, 2014

I created a tutorial on how to do exactly that with CSS3 and the LESS JavaScript library. You can find the blogpost here: https://medium.com/secoya-tech/a917b80c43f9

Here is a jsFiddle of the final result. The percentage is set via the data-progress attribute. Changes are animated using CSS transitions.

gif of radial progress indicator

Related questions

Progress Bar with HTML and CSS

I want to create a progress bar like in the below image: I have no idea about creating this. Should I use HTML5 techniques? Would you please give me some help about creating this progress bar?

Read More
How to make a progress bar

How would one go about making a progress bar in html/css/javascript. I don't really want to use Flash. Something along the lines of what can be found here: http://dustincurtis.com/about.html All I really want is …

Read More
How to customize the HTML5 input range type looks using CSS?

I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working. Can any …

Read More