Basic jQuery Circular Progress Bar Plugin - Circles

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.