Cross-browser Animated Progress Circle - circleProgressBar.js

An ultra-light (~1.1kb minified) jQuery plugin to generate a smooth, animated, cross-browser, circular progress indicator by using SVG (VML) paths.

How to use it:

1. Include the required jQuery and Raphael JavaScript libraries on the webpage.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/raphael.min.js"></script>

2. Create a placeholder for the progress circle and define the percentage value as follows:

<div class="percent" style="width:80px;height:80px;">
  <p style="display:none;">60%</p>
</div>

3. Include the jQuery circleProgressBar.js script at the bottom of the web page.

<script src="jQuery.circleProgressBar.min.js"></script>

4. Initialize the plugin to render a basic progress circle on the page.

$(function(){
  $('.percent').percentageLoader();
});

5. Determine the stroke width. Default: 20.

$('.percent').percentageLoader({
  strokeWidth: 8
});

6. Determine the text/path/background colors.

$('.percent').percentageLoader({
  bgColor: '#d9d9d9',
  ringColor: '#d53f3f',
  textColor: '#9a9a9a'
});

7. Customize the percentage value.

$('.percent').percentageLoader({
  valElement: 'p',
  fontSize: '12px',
  fontWeight: 'normal'
});

---

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