Highly Customizable SVG Progress Indicator For jQuery - svg-progress.js

svg-progress.js is a lightweight yet highly customizable jQuery plugin that helps you render an animated, SVG based progress indicator in any shapes (Triangle, Hexagon, Rhomb, Rectangle, Pentagon, Circle and SVG path).

How to use it:

1. Load the latest version of jQuery library and the JavaScript file jQuery-svg-progress.js at the end of the document.

<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="js/jQuery-svg-progress.js"></script>

2. Create a container element for the progress indicator and specify the percentage value using data-progress-value attribute as this.

<div class="svg-progress-demo" 
     data-progress-value="100">
     <span class="svg-progress-output"></span>
</div>

3. Render a default hexagon progress indicator:

$('.svg-progress-demo').svgprogress();

4. Render a rhomb progress indicator:

$('.svg-progress-demo').svgprogress({
  figure: "rhomb"
});

5. Render a react progress indicator:

$('.svg-progress-demo').svgprogress({
  figure: "rect"
});

6. Render a triangle progress indicator:

$('.svg-progress-demo').svgprogress({
  figure: "triangle"
});

7. Render a pentagon progress indicator:

$('.svg-progress-demo').svgprogress({
  figure: "pentagon"
});

8. Render a circle progress indicator:

$('.svg-progress-demo').svgprogress({
  figure: "circle"
});

9. Animate a SVG path:

$('.svg-progress-demo').svgprogress({
  figure: {path: 'M 189.91414,21.164027 C 163.745,6.8359681 129.52347,20.317035 117.42646,51.209103 105.30413,20.317035 71.094113,6.8223509 44.924979,21.164027 17.050063,36.45891 3.7237851,75.524045 25.735508,121.6075 41.370691,154.39782 69.072957,179.10221 117.42646,223.40726 165.75235,179.10221 193.46842,154.3842 209.08979,121.6075 231.10152,75.524045 217.77524,36.45891 189.91414,21.164027 Z'}
});

10. All default configuration options:

$('.svg-progress-demo').svgprogress({

  figure: "hexagon",
  endFill: 100,

  unitsOutput: '%',

  progressFill: '#fcbf02',
  progressFillGradient: [],
  progressWidth: 2,
  background: 'transparent',

  emptyFill: '#999',
  emptyFillOpacity: 0.3,

  animationDuration: 2,
  onProgressState: function(){},
  onAnimationComplate: function(){}

});

---

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