SVG Based Progress Bar Plugin For jQuery - Progress.js

File Size: 3.96 KB
Views Total: 12586
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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.

  percent: 20, // 20%

4. Customize the progress bar.


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

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