Animated Circle Progress Bar with jQuery and SVG - asPieProgress

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.