Animated Circle Progress Bar with jQuery and SVG - asPieProgress

File Size: 216 KB
Views Total: 74077
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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="//"></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>

4. Usages.

// Start a progress bar

// Finish

// 50%

// 50%

// Stop a progress bar

// 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:


  • v0.4.7


  • ES5 --> ES6


  • add the wrap of svg


  • fixed animationFrame not stop when leaving page issue


  • add classes optons


  • make svg responsive



  • add easing support


  • fix time issue


  • fix requestAnimationFrame issue on ios 7 devices.


  • 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.