Animated SVG Progress Bar For jQuery/JavaScript/Angular

Animated SVG Progress Bar For jQuery/JavaScript/Angular
File Size: 85.4 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.