Animated SVG Progress Bar For jQuery/JavaScript/Angular

This is a simple, animated, SVG based circular progress bar component which can be implemented in jQuery, JavaScript and AngularJS.

How to use it:

1. Download and import the following JavaScript files into your web projects.

<!-- jQuery-->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/circular-progress-jquery.js"></script>

<!-- Vanilla JavaScript-->
<script src="/path/to/circular-progress.js"></script>
<!-- Angular-->

<!-- Angular-->
<script src="/path/to/angular.min.js"></script>
<script src="/path/to/circular-progress-angular.js"></script>

2. Draw a circular progress bar using SVG elements as follow:

<svg height="200" width="200">
  <circle id="_cir_P_x" cx="100" cy="100" r="60" stroke="#004C70" stroke-width="20" fill="#E0CC97"></circle>
  <circle id="_cir_P_y" cx="100" cy="100" r="60" stroke="#E0A025" stroke-width="20"  stroke-dasharray="0,1000" fill="none"></circle>
  <text x="50%" y="50%" text-anchor="middle" stroke="none" stroke-width="1px" dy=".3em" id="_cir_Per">0%</text>
</svg>

3. Animate the circular progress bar to a percentage value you specify.

__showProgress(30)

Change log:

2017-07-22

• Added Multiple progress bar support for following lang. jQuery and Javascript.

---

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