Animated circular progress bars with jQuery

Great jQuery Plugin to draw animated circular progress bars.

Show circular progress bars with jQuery

Take a look at website and more examples:

jQuery circular progress bars
jQuery circular progress bars



<script src="jquery.min.js"></script>
<script src="circle-progress.js"></script>


<div id="circle"></div>


  value: 0.75,
  size: 80,
  fill: {
    gradient: ["red", "orange"]


1. No animation, custom gradient:

    value: 0.35,
    animation: false,
    fill: { gradient: ['#ff1e41', '#ff5f43'] }

2. Default gradient:

// - listening to 'circle-animation-progress' event 
// and display the animation progress: from 0 to 100%
    value: 0.6
}).on('circle-animation-progress', function(event, progress) {
    $(this).find('strong').html(parseInt(100 * progress) 
      + '<i>%</i>');

There is a rich set of options to adjust progress bars.

From version 1.1.3 you can specify any config option as HTML5 data- attributes.

Download it from GitHub:

See also:

Keep the progress!