Smooth Circle Percentage Chart Plugin With jQuery

Circle Charts is a lightweight jQuery plugin for drawing a CSS3-supported, animated, smooth chart/loader/progress bar that shows data/progress in percentage.

How to make use of it:

1. Load the jQuery Circuit Diagrams plugin after the 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 using the data percentage attribute that specifies the percentage.

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

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

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

4. Slide the options during initialization to customize the pie chart/progress bar.

$('.demo').percentcircle({

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

});

See Demo And Download

Official Website(jamiepickett): Click Here

This superior jQuery/javascript plugin is developed by jamiepickett. For extra Advanced usage, please go to the official website.

Share