Cross-browser Animated Progress Circle - circleProgressBar.js

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

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.


5. Determine the stroke width. Default: 20.

  strokeWidth: 8

6. Determine the text/path/background colors.

  bgColor: '#d9d9d9',
  ringColor: '#d53f3f',
  textColor: '#9a9a9a'

7. Customize the percentage value.

  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.