jQuery Plugin to draw animated circular progress bars like this:

Check out more examples!

Download latest GitHub release or bower install jquery-circle-progress

<script src="http://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 | | 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" | | fill | The arc fill config. You may specify next:
- { gradient: ["red", "green", "blue"] }
- { color: "#ff1e41" }
- { image: "http://i.imgur.com/pT0i89v.png" }
- { 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, ease: "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

When animation is enabled, there are 3 events available:

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).

You can get the <canvas> (but only if the widget is already inited):

$('#circle').circleProgress({ value: 0.5 });
var canvas = $('#circle').circleProgress('widget');

You can redraw existing circle (but only if the widget is already inited):

$('#circle').circleProgress({ value: 0.5, fill: { color: 'orange' }});
$('#circle').circleProgress('redraw'); // will use current configuration and redraw the circle
$('#circle').circleProgress(); // alias for 'redraw'

You can change the default options:

$.circleProgress.defaults.size = 50;