Customizable Circular Progress Bar with jQuery and CSS3 - Circle Diagram
File Size: | 36.4 KB |
---|---|
Views Total: | 32175 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Circle Diagram is a super simple jQuery plugin which allows you to draw a customizable circular progress bar with percentage display by using CSS3 transforms.
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
How to use it:
1. Load the jQuery library and the jQuery circle diagram in the web page.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.diagram.js"></script>
2. Create an empty DIV element in the web page and use Html5 data-percent
attribute to specify the percentage used in the circular progress bar.
<div class="demo" data-percent="33.3%"></div>
3. Initialize the plugin to create a circular progress bar with default settings.
$('.demo').diagram();
4. Optional settings to customize the progress bar.
$('.demo').diagram({ size: "200", // graph size borderWidth: "20", // border width bgFill: "#95a5a6", // background color frFill: "#1abc9c", // foreground color textSize: 54, // text color font: "serif", // font textColor: '#2a2a2a' // text color });
Change logs:
2015-04-28
- minor changes.
2015-04-08
- all options can be set via data-attributes.
2015-02-22
- Update jquery.diagram.js
This awesome jQuery plugin is developed by monochromer. For more Advanced Usages, please check the demo page or visit the official website.