Minimalist Graphical Progress Indicator with jQuery and Canvas - circleGraphic

File Size: 2.64 KB
Views Total: 12529
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist Graphical Progress Indicator with jQuery and Canvas - circleGraphic

circleGraphic is a tiny and simple-to-use jQuery plugin that uses HTML5 canvas 2D API to draws an animated, circular progress indicator (loading indicator, gauge meter, dial) to represent percentage values. No images and CSS rules required.

How to use it:

1. Add the latest version of jQuery library and the jQuery circleGraphic plugin to the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.circleGraphic.js"></script>

2. Wrap the percentage value into an inline element as follow.

<div class="demo">75</div>

3. Draws a 75% progress bar on your web page.

$('.demo').circleGraphic();

4. Change the staring angle.

$('.demo').circleGraphic({startAngle: 0});

5. Change the fill color.

$('.demo').circleGraphic({color:'#F90'});

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