Basic jQuery Circular Progress Bar Plugin - Circles

File Size: 8.41 KB
Views Total: 4267
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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

//add an additional element into the inner to show the current position
showProgress: 0, 

//text to show prior to the progress output

//text to show after the progress output

//how long to delay the initial animation on plugin load
delayAnimation: 0, 

//callback function
onFinishMoving: function() {}, 

Change log:


  • Allowing 'jump' step animation


  • 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.