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:
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
See also:
http://javascript-html5-tutorial.net/2015/11/09/a-percentage-loader-jquery-plugin.html
Keep the progress!
Views:
5,412
Related Posts
-
Analog and digital jQuery world clock plugin – jClocksGMT.js
No Comments | Mar 7, 2016 -
jQuery fancy input box with amazing CSS3 effects
No Comments | Jan 16, 2016 -
jQuery image slider with Lightbox – ion.imageSlider
No Comments | Jan 2, 2016 -
Responsive 3D Carousel with jQuery – jR3DCarousel
No Comments | Feb 13, 2020