Animated circular progress bars with jQuery

DirectCode | December 29, 2015 | HTML5, jQuery, Plugins | No Comments

Great jQuery Plugin to draw animated circular progress bars.

Show circular progress bars with jQuery

Take a look at website and more examples:

https://github.com/kottenator/jquery-circle-progress

Usage

Scripts:

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

Area:

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

JS:

$('#circle').circleProgress({
  value: 0.75,
  size: 80,
  fill: {
    gradient: ["red", "orange"]
  }
});

Examples

1. No animation, custom gradient:

$('.first.circle').circleProgress({
    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%
$('.second.circle').circleProgress({
    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:

http://kottenator.github.io/jquery-circle-progress

Keep the progress!