Minimalist Graphical Progress Indicator with jQuery and Canvas - circleGraphic

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

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.