Smooth Circle Chart Plugin with jQuery and CSS3 - Circle Charts

Smooth Circle Chart Plugin with jQuery and CSS3 - Circle Charts
File Size: 3.31 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Circle Charts is a lightweight jQuery plugin to draws a CSS3 powered, animated, smooth circular chart/loader/progress bar that shows the data/progress in percentage.

See also:

Basic usage:

1. Load the jQuery circle charts plugin after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/jquery.circlechart.js"></script>

2. Create a DIV element with the data-percent attribute specifying the percentage.

<div class="demo" data-percent="65"></div>

3. Call the plugin on this DIV element to render a basic circular chart/progress bar.

$('.demo').percentcircle();

4. Pass the options during initialization to customize the circular chart/progress bar.

$('.demo').percentcircle({

animate : true,
diameter : 100,
guage: 2,
coverBg: '#fff',
bgColor: '#efefef',
fillColor: '#5c93c8',
percentSize: '15px',
percentWeight: 'normal'

});

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