Smooth Circle Chart Plugin with jQuery and CSS3 - Circle Charts

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:

• CProgress - jQuery Circular Progress Bar Plugin
• Animated Circular Progress Bar with jQuery and Canvas - Circle Progress
• Circular Percentage Loader Plugin with jQuery and Canvas - ClassyLoader
• Percentage Loader - jQuery Progress Bar Plugin
• Customizable Circular Progress Bar with jQuery and CSS3 - Circle Diagram

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.