Animated Circle Progress Bar with jQuery and SVG - asPieProgress
File Size: | 216 KB |
---|---|
Views Total: | 73901 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

asPieProgress is a lightweight jQuery plugin that makes use of SVG
to draw an animated pie chart-like circular progress bar with percentage and text label display. The plugin is developed under the GPL licence.
See also:
- CProgress - jQuery Circular Progress Bar Plugin
- Animated Circular Progress Bar with jQuery and Canvas - Circle Progress
- Circular Percentage Loader Plugin with jQuery and Canvas - ClassyLoader
- Percentage Loader - jQuery Progress Bar Plugin
- Customizable Circular Progress Bar with jQuery and CSS3 - Circle Diagram
How to use it:
1. Load the required jQuery asPieProgress plugin's stylesheet in the header.
<link rel="stylesheet" href="path/to/progress.css">
2. Load jQuery library and the jQuery asPieProgress plugin's script at the bottom.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="path/to/jquery-asPieProgress.js"></script>
3. Create Html elements for the circular progress bar. Options can be passed via JS object or Html5 data-*
attributes, as in data-goal="50"
<div class="pie_progress" role="progressbar" data-goal="50"> <div class="pie_progress__number">0%</div> <div class="pie_progress__label">Text Label</div> </div>
4. Usages.
// Start a progress bar $('.pie_progress').asPieProgress('start'); // Finish $('.pie_progress').asPieProgress('finish'); // 50% $('.pie_progress').asPieProgress('go',50); // 50% $('.pie_progress').asPieProgress('go','50%'); // Stop a progress bar $('.pie_progress').asPieProgress('stop'); // Reset $('.pie_progress').asPieProgress('reset');
4. All the options.
namespace: '', classes: { svg: 'pie_progress__svg', element: 'pie_progress', number: 'pie_progress__number', content: 'pie_progress__content' }, min: 0, max: 100, goal: 100, size: 160, speed: 15, // speed of 1/100 barcolor: '#ef1e25', barsize: '4', trackcolor: '#f2f2f2', fillcolor: 'none', easing: 'ease', numberCallback: function numberCallback(n) { 'use strict'; var percentage = Math.round(this.getPercentage(n)); return percentage + '%'; }, contentCallback: null
Change logs:
2017-09-11
- v0.4.7
2016-09-01
- ES5 --> ES6
2015-06-19
- add the wrap of svg
2015-05-01
- fixed animationFrame not stop when leaving page issue
2015-04-26
- add classes optons
2015-04-04
- make svg responsive
2015-03-05
- demo update.
2014-12-09
- add easing support
2014-11-21
- fix time issue
2014-09-18
- fix requestAnimationFrame issue on ios 7 devices.
2014-09-06
- update trigger func
This awesome jQuery plugin is developed by amazingSurge. For more Advanced Usages, please check the demo page or visit the official website.