SVG Based Progress Bar Plugin For jQuery - Progress.js

Progress.js is a really simple jQuery plugin which draws an animated and fully customizable progress bar inside a SVG element.

Basic usage:

1. Include the latest version of jQuery library and the jQuery progress.js script on your web page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.progress.js"></script>

2. Create an empty SVG element for the progress bar.

<svg id="container"></svg>

3. Render a basic progress bar with a specified percent value inside the SVG element.

$("#container").Progress({
  percent: 20, // 20%
});

4. Customize the progress bar.

$("#container").Progress({

  // width & height of the progress bar
  width: 90,
  height: 20, 

  // percent value
  percent: 0, 

  // background color of the progress bar
  backgroundColor: '#555',

  // fill color of the progress bar
  barColor: '#d9534f', 

  // text color
  fontColor: '#fff', 

  // border radius
  radius: 4,

  // font size
  fontSize: 12,

  // animation options
  increaseTime: 1000.00/60.00, 
  increaseSpeed: 1, 
  animate: true
  
});

5. Update the progress bar.

var progress = $("#container").Progress({
  percent: 20, // 20%
});

// set the percent value
progress.percent(90);

---

This awesome jQuery plugin is developed by clarkfbar. For more Advanced Usages, please check the demo page or visit the official website.