jQuery Plugin to draw animated circular progress bars like this:
Check out more examples! Or maybe the crazy one?
Download latest GitHub release
or bower install jquery-circle-progress
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery-circle-progress/dist/circle-progress.js"></script>
<div id="circle"></div>
<script>
$('#circle').circleProgress({
value: 0.75,
size: 80,
fill: {
gradient: ["red", "orange"]
}
});
</script>You should specify options like in usage example above.
| Option | Description |
| ---- | ---- | ---- |
| value | This is the only required option. It should be from 0.0 to 1.0
Default: 0 |
| size | Size of the circle / canvas in pixels
Default: 100 |
| startAngle | Initial angle (for 0 value)
Default: -Math.PI |
| reverse | Reverse animation and arc draw
Default: false |
| thickness | Width of the arc. By default it's automatically calculated as 1/14 of size but you may set your own number
Default: "auto" |
| lineCap | Arc line cap: "butt", "round" or "square" - read more
Default: "butt"
| fill | The arc fill config. You may specify next:
- { color: "#ff1e41" }
- { color: 'rgba(255, 255, 255, .3)' }
- { gradient: ["red", "green", "blue"] }
- { gradient: [["red", .2], ["green", .3], ["blue", .8]] }
- { gradient: [ ... ], gradientAngle: Math.PI / 4 }
- { gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] }
- { image: "http://i.imgur.com/pT0i89v.png" }
- { image: imageInstance }
- { color: "lime", image: "http://i.imgur.com/pT0i89v.png" }
Default: { gradient: ["#3aeabb", "#fdd250"] } |
| emptyFill | Color of the "empty" arc. Only a color fill supported by now
Default: "rgba(0, 0, 0, .1)" |
| animation | Animation config. See jQuery animations.
You may also set it to false
Default: { duration: 1200, easing: "circleProgressEase" }
"circleProgressEase" is just a ease-in-out-cubic easing |
| animationStartValue | Default animation starts at 0.0 and ends at specified value. Let's call this direct animation. If you want to make reversed animation then you should set animationStartValue to 1.0. Also you may specify any other value from 0.0 to 1.0
Default: 0.0
From version 1.1.3 you can specify any config option as HTML data- attribute.
It will work only on init, i.e. after the widget is inited you may update its properties only via .circleProgress({/*...*/}) method. data- attributes will be ignored.
Also, object options like "fill" or "animation" should be valid JSON (and don't forget about HTML-escaping):
<div
class="circle"
data-value="0.9"
data-size="60"
data-thickness="20"
data-animation-start-value="1.0"
data-fill="{
"color": "rgba(0, 0, 0, .3)",
"image": "http://i.imgur.com/pT0i89v.png"
}"
data-reverse="true"
></div>When animation is enabled, there are 3 events available:
| Event | Handler |
|---|---|
circle-animation-start |
function(event): - event - jQuery event |
circle-animation-progress |
function(event, animationProgress, stepValue): - event - jQuery event - animationProgress - from 0.0 to 1.0 - stepValue - current step value: from 0.0 to value |
circle-animation-end |
function(event): - event - jQuery event |
It uses <canvas> which is supported by all modern browsers (including mobile browsers)
and Internet Explorer 9+ (Can I Use).
I have not implemented any fallback / polyfill for unsupported browsers yet (i.e. for Internet Explorer 8 and older / misc browsers).
Get it:
$('.circle').circleProgress({ value: 0.5 });
var value = $('.circle').circleProgress('value'); // 0.5It will return the first item's value (by first I mean when $('.circle').length >= 1).
It works only if the widget is already inited. Raises an error otherwise.
Set it:
$('.circle').circleProgress('value', 0.75); // set value to 0.75 & animate the change It will update all selected items value and animate the change. It doesn't redraw the widget - it updates the value & animates the changes. For example, it may be an AJAX loading indicator, which shows the loading progress.
$('.circle').circleProgress({ value: 0.5 });
var canvas = $('.circle').circleProgress('widget');It will return the first item's <canvas> (by first I mean when $('.circle').length >= 1).
It works only if the widget is already inited. Raises an error otherwise.
var instance = $('#circle').data('circle-progress');$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});
$('#circle').circleProgress('redraw'); // use current configuration and redraw
$('#circle').circleProgress(); // alias for 'redraw'
$('#circle').circleProgress({ size: 150 }); // set new size and redrawIt works only if the widget is already inited. Raises an error otherwise.
$.circleProgress.defaults.size = 50;Here is my proposed solution.
E.g. for Retina support or for responsive design, you can do it in the following way.
There is no full-feature support for IE8 (actually, I didn't imlpement IE8 support at all). But you may follow my recommendations.
Here is what you can do.
It's not in the "core" but you can use my example of mouse/touch events handling.
It's a bit "tricky" but possible. Here is my little collection.