| Author: | afuersch |
|---|---|
| Views Total: | 300,078 views |
| Official Page: | Go to website |
| Last Update: | April 7, 2015 |
| License: | MIT |
Preview:
Description:
A pure CSS progress bar that shows progress bar with percentage in a circular bar view.
See Also:
- Best circular/Radial progress Bar JavaScript Plugins
- Best Loading Spinner/Indicator JavaScript & CSS Libraries
- Best JavaScript & CSS Progress Bar Components
How to use it:
Load the circle.css in the document’s head section.
<link rel="stylesheet" href="css/circle.css">
Create a basic circular progress bar.
<div class="c100 p25">
<span>25%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>Change the size of the progress bar.
<div class="c100 p25 big"> ... </div> <div class="c100 p25 small"> ... </div>
Change the color of the progress bar.
<div class="c100 p25 green"> ... </div> <div class="c100 p25 orange"> ... </div> <div class="c100 p25 dark"> ... </div>
See Also:
Simple Scroll Progress Indicator For Long Pages – PageBar.js
Generate Linear & Radial Progressbars Using CSS – Progress.css
Lightweight Scroll Progress Bar In JavaScript – scrollProgress.js
Modern Slim Progress Bar For Form Completion – Fort.js
Page Scroll Reading Progress Indicator with Progress.js
Simple Plain Circle Progress Bar Library – ProgressCircle.js
Easy Progress Bar Engine With Promise Support – Rsup Progress
Animated Circular Speedometer In Vanilla JavaScript
Looks great and got it working easily. Could you show how make the div clickable i.e direct to a page. Adding around any parts seems to mess things up pretty badly, probably due to the existing CSS rules.
Thank you
Alex
Ignore previous comment its working 🙂
Thanks for the CSS! Is there a license for this code? I’ve written some JS to control the value so it can be used as a progress dial. Thanks!
could you share the code ?
Its so simple and helpful
hi there … I sort of got mine to work apart from it doesn’t do it in a circle it does it in a square box 🙁 help please.
Steven
simple demo
https://jsfiddle.net/sophtwhere/z556dqne/
Thank you, it helped me a lot!
But what is the function of the div class=”fill”
otimo, muito bom, ajudou demais
Anyway to increase width of the ring? i would like to use it in a 50px size or less.
.c100 {
font-size: 50px !important;
}
It work’s for ring size although it says font-size
Ok, this modify the size for the whole circle. Not what I have asked.
I figure I have to play with top and left, margin and width and height of splice or bar or fill. Thanks anyway.
If i’m reducing the font-size to 30px for .c100 , then the filled area is getting distorted or clipped, any solution for that?
https://jsfiddle.net/harshamotwani22/qwonnhhk/
This is sample for the problem.. if we closely look at the blue ring, its getting clipped somewhere
Are you mention about the mismatch grey circle and the blue circle ? Both are not coincide at some point, right ?
Alternatively had you tried jQuery roundSlider plugin (http://roundsliderui.com/) ?
Yes
Is there any easy way to center everything. I put contents in a div and tried to center block it, but it remains constantly left justified…
Can you update a jsfiddle to show what you tried, so that it is easy to help you further.
HEY! THANKS a bunch! This is really helpful.
Cheers from Montreal, Canada!
Awesome, Thank you, 🙂
Nice Job!!!
How do I make the circle bar thicker??
where is the circle.css
Looks great, But can we convert it into a straight line?
I am currently developing a React project. Would you be interested if I refactored this into a pre-built React component?