Simple Circle Progress Indicator Plugin with jQuery and CSS3 - Progress Circle
File Size: | 5.24 KB |
---|---|
Views Total: | 52175 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Progress Circle is a simple jQuery plugin that utilizes CSS3 transforms and transitions to draw a circular progress bar/indicator with percent text display.
See also:
- Percentage Loader - jQuery Progress Bar Plugin
- Animated Circle Statistics Plugin With jQuery and Canvas - Circliful
- CProgress - jQuery Circular Progress Bar Plugin
How to use it:
1. Include the latest jQuery javascript library on your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
2. Include the jQuery progress circle plugin after jQuery library.
<link href="css/circle.css" rel="stylesheet" type="text/css"> <script src="progress-circle.js"></script>
3. Create a container element where you want to draw a circular progress bar.
<div id="circle"> </div>
4. Initialize the plugin and update the values using javascipt as follows.
$('#circle').progressCircle({ nPercent : 50, showPercentText : true, circleSize : 100, thickness : 3 });
This awesome jQuery plugin is developed by iammary. For more Advanced Usages, please check the demo page or visit the official website.