Animated Responsive Enabled SVG Progress Bars – progressbar.js

Progressbar.js is fully responsive supported and lightweight jQuery plugin for animated progress bars. Some predefined shapes(Line, Circle and SemiCircle) are included within this plugin and anyone can use these shapes easily. Besides these shapes, it supports any types of SVG custom shapes and also animates the custom shapes smoothly.

Features:

• Lightweight and easy to implement.
• Supports on all mobile devices and the latest browsers.
• Various options to modify the progress bar.
• Custom SVG shapes supported.
• Animated smoothly.

How to use it:

1. Include the Javascript progressbar.min.js at the bottom of the web page.

<script src="path/to/progressbar.min.js"></script>

2. Add the basic HTML to the page.

<div id="container"></div>

3. Initialize the plugin and we’re ready to go.

var bar = new ProgressBar.Line(container, {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'}
});

bar.animate(1.0);  // Number from 0.0 to 1.0