Basic jQuery Circular Progress Bar Plugin - Circles
File Size: | 8.41 KB |
---|---|
Views Total: | 4228 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Circles is a lightweight, unobtrusive jQuery plugin which allows to visualize numeric data (percentage or absolute numbers) in an animated circular progress bar with lots of configuration options. No images used.
How to use it:
1. Load the required stylesheet circularprogress.css
in the head
section of the document.
<link rel="stylesheet" href="circularprogress.css">
2. Create a DIV element that will serve as a container for the progress bar.
<div class="progress demo"></div>
3. Load the script circularprogress.jquery.js
after you have jQuery loaded.
<script src="jquery.min.js"></script> <script src="circularprogress.jquery.js"></script>
4. Render a circular progress bar inside the DIV element you just created.
$('.demo').circles(/*OPTIONS*/);
5. Customize the progress bar.
//amount to change progress by in each animation frame rotateBy: 1, //initial position on plugin load initialPos: 0, //target position to animate to on plugin load targetPos: 0, //sets the scale of the circle. // Common uses would be to have a progress meter to show percentage progress (set this to 100) or a much smaller number of steps scale: 360, //speed of animation speed: 5, //if true, make the progress a 'ring' instead of a solid circle includeInner: 0, //html to put inside the circle innerHTML:'', //add an additional element into the inner to show the current position showProgress: 0, //text to show prior to the progress output progPreText:'', //text to show after the progress output progPostText:'', //how long to delay the initial animation on plugin load delayAnimation: 0, //callback function onFinishMoving: function() {},
Change log:
2015-07-21
- Allowing 'jump' step animation
2015-07-17
- Fixed negative numbers caused corruption
This awesome jQuery plugin is developed by andysellick. For more Advanced Usages, please check the demo page or visit the official website.