CProgress

jQuery circular progress bar

demo

create destroy

play stop reset

speed 10 speed 23.89 speed 50 speed 100

PI Step 0.05 PI Step 0.10 PI Step 0.15

show percents hide percents

limit 20 limit 50 limit 100 limit 120

go to 20 go to 50 go to 100

skin #1 skin #2 skin #3

Skin design by Orman Clark, Coded by Artur Tomaszewski

download

DOWNLOAD CProgress 1.0.3

documentation

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);}
	  });
     }
});

By default progressbar is located in the center of target element. You Can offset it using css margin values on .jCProgress css class.

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});
     }
});

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;
}

TODO & Changelog

Version 1.0.3 released, fixed starting position on options={percent: value,..}
Version 1.0.2 released, fixed drawing other sizes
Version 1.0.1 released, fixed image loading
Background div on created element
Real life demo

License

Plugin is distributed undet MIT license.