CProgress - jQuery Circular Progress Bar Plugin

CProgress is a jQuery Circular Progress Bar Plugin with many options, so that you can use it to create various awesome progress bars for your website/application.

How to Use:

1. Add jQuery Library, jQuery UI, jCprogress.js before </head>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script>
<script src="jCProgress-1.0.3.js" type="text/javascript"></script>

2. Usage:

var myplugin;
$('#target').click(function(){
     if(!myplugin){
	  myplugin = $('#p1').cprogress({
	       percent: 10, // starting position
	       img1: 'v1.png', // background
	       img2: 'v2.png', // foreground
	       speed: 200, // speed (timeout)
	       PIStep : 0.05, // every step foreground area is bigger about this val
	       limit: 20, // end value
	       loop : false, //if true, no matter if limit is set, progressbar will be running
	       showPercent : true, //show hide percent
	       onInit: function(){console.log('onInit');},
	       onProgress: function(p){console.log('onProgress',p);}, //p=current percent
	       onComplete: function(p){console.log('onComplete',p);}
	  });
     }
});

3. Functions:

// Create
options = {
     img1: 'v1.png',
     img2: 'v2.png',
     speed: 50,
     limit: 70,

};

myplugin = $('#p1').cprogress(options);

// Create on Event
$('#create').click(function(){
     if(!myplugin){
	  myplugin = $('#p1').cprogress(options);
     }
});

// Destroy
$('#destroy').click(function(){
     if(myplugin){
	  myplugin=myplugin.destroy();
     }
});

// Start
$('#play').click(function(){
     if(myplugin){
	  myplugin.start();
     }
});

// Stop
$('#pause').click(function(){
     if(myplugin){
	  myplugin.stop();
     }
});

// Reset
$('#reset').click(function(){
     if(myplugin){
	  myplugin.reset();
     }
});

// Change options (you can change all options, including images)
$('#speed10').click(function(){
     if(myplugin){
	  myplugin.options({speed: 10});
     }
});

4. The Css

.jCProgress {
     position: absolute;
     z-index: 9999999;
     /*  margin-top:-15px; /* offset from the center */
}

.jCProgress > div.percent {
     font: 18px/27px 'BebasRegular', Arial, sans-serif;
     color:#ebebeb;
     text-shadow: 1px 1px 1px #1f1f1f;

     position:absolute;
     margin-top:40px;
     margin-left:22px;
     text-align: center;
     width:60px;
}

---

This awesome jQuery plugin is developed by ar2oor. For more Advanced Usages, please check the demo page or visit the official website.