Animated Circle Progress Bar with jQuery and SVG - asPieProgress

Animated Circle Progress Bar with jQuery and SVG - asPieProgress
File Size: 137 KB
Views Total:
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:

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:

2016-10-19

  • v0.4.6

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

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.