Animated SVG Progress Bar For jQuery/JavaScript/Angular

File Size: 85.4 KB
Views Total: 5771
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.