Simple Circle Progress Indicator Plugin with jQuery and CSS3 - Progress Circle

File Size: 5.24 KB
Views Total: 52126
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Circle Progress Indicator Plugin with jQuery and CSS3 - Progress Circle

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:

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.