SVG Based Circular Progress Bar Plugin For jQuery

A lightweight and easy-to-use jQuery plugin used to draw an animated, fully customizable & styleable, circular progress bar using SVG element.

How to use it:

1. Create a container for the circular progress bar.

<div id="demo"></div>

2. Include jQuery library and the jQuery CirclesProgressbar plugin at the bottom of your html page.

<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="jquery.circles-progressbar.js"></script>

3. Call the function to render a basic progress bar inside the container you just created.

$('#demo').circlesProgress({'progress':'50'});

4. Default plugin options.

// size in px
size:50,

// progress
progress:0,

// initial progress
initialProgress:0,

// enable text indicator inside the progress bar
enableTextIndicator: false,

// SVG template
svgElement: $('<svg><path class="cpb-border"></path><path class="cpb-loader"></path></svg>'),

// Text template
textElement: $('<div class="cpb-text-indicator" style="margin:0px;z-index:10;position:absolute;vertical-align:middle;top:0;left:0;text-align:center;"></div>'),

// CSS class for text element
textElementClass: 'cpb-text',

// display percentage
diplayPercentSign: false,

// inner color in hex
innerColor:'#000',

// outer color in hex
outerColor:'#F00',

// inner opacify
innerOpacity:1,

// outer opacify
outerOpacity:1,

// border size
borderSize:10,

// debug mode
debug:true,

// Transparency options
alpha:0,
deltaT:5,
currentAlpha:0,

// enable animations
animate:true

---

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