<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row" id="fakhar-cricle">
<div class="col-xs-4 col-xs-offset-4">
<div class="text-center" style="width:150px;margin:auto">
<div id="circle" class="circle" style="margin:auto" data-next="none">
</div>
<button class="btn btn-block btn-success" type="button" id="cricle-btn" data-size="20480"><i class="fa fa-fw fa-download"> </i> Download</button>
</div>
</div>
</div>
</div>
<input type="hidden" id="cricleinput" value="0">
<script>
( function( $ ){
$(document).ready(function() {
$( '.circle' ).each(function() {
$(this).progressCircle({
nPercent : 0,
showPercentText : true,
thickness : 10,
circleSize : 150
});
});
$("#cricle-btn").click(function() {
var speed = $(this).data("size");
var speed = parseInt(speed)*10;
var speed = parseInt(speed)/1024;
var speed = parseInt(speed);
$(this).addClass("active");
circle('#circle',"#cricleinput",speed);
})
function circle(circleID,cricleinput, speed) {
setTimeout(function() {
$(circleID).each(function() {
var ci = $(cricleinput).val();
var ci = parseInt(ci)+1;
if(ci<100) {
$(this).progressCircle({
nPercent : ci,
showPercentText : true,
thickness : 10,
circleSize : 150
});
}
else
if(ci==100) {
$(this).addClass("end").progressCircle({
nPercent : 100,
showPercentText : true,
thickness : 9,
circleSize : 150
});
}
else
if(ci==101) {
$(this).progressCircle({
nPercent : 100,
showPercentText : true,
thickness : 8,
circleSize : 150
});
}
else
if(ci==102) {
$(this).progressCircle({
nPercent : 100,
showPercentText : true,
thickness : 7,
circleSize : 150
});
}
else
if(ci==103) {
$(this).progressCircle({
nPercent : 100,
showPercentText : true,
thickness : 6,
circleSize : 150
});
}
else
if(ci==104) {
$(this).progressCircle({
nPercent : 100,
showPercentText : true,
thickness : 5,
circleSize : 150
});
}
else
if(ci==105) {
$(this).progressCircle({
nPercent : 100,
showPercentText : true,
thickness : 4,
circleSize : 150
});
}
$(cricleinput).val(ci);
});
$( circleID ).promise().done(function() {
var ci = $("#cricleinput").val();
if(ci<105) {
circle(circleID,cricleinput,speed);
}
else {
var nextid = $(this).data("next");
if(nextid != 'none') {
$(cricleinput).val(0);
circle(nextid,cricleinput,speed);
}
else {
$(".end").addClass("complate");
}
}
})
},speed);
}
});
})( jQuery );
</script>
/****************************************************************
*
* CSS Percentage Circle
* Based on CSS provided by Andre Firchow
*
*****************************************************************/
.prog-circle .slice {
position : absolute;
width : 1em;
height : 1em;
clip : rect(0em, 1em, 1em, 0.5em);
}
.prog-circle .slice.clipauto {
clip : rect(auto, auto, auto, auto);
}
.prog-circle .fill, .prog-circle .bar {
position : absolute;
border : 0.08em solid #90c844;
width : 0.84em;
height : 0.84em;
clip : rect(0em, .5em, 1em, 0em);
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-radius : 50%;
border-radius : 50%;
-webkit-transform : rotate(20deg);
-moz-transform : rotate(20deg);
-ms-transform : rotate(20deg);
-o-transform : rotate(20deg);
transform : rotate(20deg);
}
.prog-circle {
position : relative;
font-size : 120px;
width : 1em;
height : 1em;
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-radius : 50%;
border-radius : 50%;
float : left;
margin : 0 0.1em 0.1em 0;
background-color : #e6f2b6;
}
.prog-circle .percenttext {
position : absolute;
width : 100%;
height : 1em;
z-index : 1;
margin : auto;
top : 0;
left : 0;
right : 0;
bottom : 0;
font-size : 0.3em;
color : #90c844;
display : block;
text-align : center;
white-space : nowrap;
line-height : 100%;
-webkit-transition-duration : 0.2s;
-moz-transition-duration : 0.2s;
-o-transition-duration : 0.2s;
transition-duration : 0.2s;
-webkit-transition-timing-function : ease-out;
-moz-transition-timing-function : ease-out;
-o-transition-timing-function : ease-out;
transition-timing-function : ease-out;
}
.prog-circle .after {
position : absolute;
top : 0.08em;
left : 0.08em;
display : block;
content : " ";
-webkit-border-radius : 50%;
-moz-border-radius : 50%;
-ms-border-radius : 50%;
-o-border-radius : 50%;
border-radius : 50%;
background-color : #FFFFFF;
width : 0.84em;
height : 0.84em;
}
.end .fill,.end .bar {
border-color:#000;
transition:border-color 5s linear;
}
.end .percenttext {
color:#000;
transition:color 5s linear;
}
.end.complate .fill,.end.complate .bar {
border-color:#ccc;
transition:border-color 1.5s linear;
}
.end.complate .percenttext {
color:#ccc;
transition:color 1.5s linear;
}
#fakhar-cricle .circle * {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}
#cricle-btn:after {
display:block;
text-align:center;
content:'size: ' attr(data-size) 'kb';
}
( function( $ ){
var ProgressCircle = function( element, options ){
var settings = $.extend( {}, $.fn.progressCircle.defaults, options );
var thicknessConstant = 0.02;
var nRadian = 0;
computePercent();
setThickness();
var border = ( settings.thickness * thicknessConstant ) + 'em';
var offset = ( 1 - thicknessConstant * settings.thickness * 2 ) + 'em';
var circle = $( element );
var progCirc = circle.find( '.prog-circle' );
var circleDiv = progCirc.find( '.bar' );
var circleSpan = progCirc.children( '.percenttext' );
var circleFill = progCirc.find( '.fill' );
var circleSlice = progCirc.find( '.slice' );
if ( settings.nPercent == 0 ) {
circleSlice.hide();
} else {
resetCircle();
transformCircle( nRadians, circleDiv );
}
setBorderThickness();
updatePercentage();
setCircleSize();
function computePercent () {
settings.nPercent > 100 || settings.nPercent < 0 ? settings.nPercent = 0 : settings.nPercent;
nRadians = ( 360 * settings.nPercent ) / 100;
}
function setThickness () {
if ( settings.thickness > 10 ) {
settings.thickness = 10;
} else if ( settings.thickness < 1 ) {
settings.thickness = 1;
} else {
settings.thickness = Math.round( settings.thickness );
}
}
function setCircleSize ( ) {
progCirc.css( 'font-size', settings.circleSize + 'px' );
}
function transformCircle ( nRadians, cDiv ) {
var rotate = "rotate(" + nRadians + "deg)";
cDiv.css({
"-webkit-transform" : rotate,
"-moz-transform" : rotate,
"-ms-transform" : rotate,
"-o-transform" : rotate,
"transform" : rotate
});
if( nRadians > 180 ) {
transformCircle( 180, circleFill );
circleSlice.addClass( ' clipauto ');
}
}
function setBorderThickness () {
progCirc.find(' .slice > div ').css({
'border-width' : border,
'width' : offset,
'height' : offset
})
progCirc.find('.after').css({
'top' : border,
'left' : border,
'width' : offset,
'height' : offset
})
}
function resetCircle () {
circleSlice.show();
circleSpan.text( '' );
circleSlice.removeClass( 'clipauto' )
transformCircle( 20, circleDiv );
transformCircle( 20, circleFill );
return this;
}
function updatePercentage () {
settings.showPercentText && circleSpan.text( settings.nPercent + '%' );
}
};
$.fn.progressCircle = function( options ) {
return this.each( function( key, value ){
var element = $( this );
if ( element.data( 'progressCircle' ) ) {
var progressCircle = new ProgressCircle( this, options );
return element.data( 'progressCircle' );
}
$( this ).append( '<div class="prog-circle">' +
' <div class="percenttext"> </div>' +
' <div class="slice">' +
' <div class="bar"> </div>' +
' <div class="fill"> </div>' +
' </div>' +
' <div class="after"> </div>' +
'</div>');
var progressCircle = new ProgressCircle( this, options );
element.data( 'progressCircle', progressCircle );
});
};
$.fn.progressCircle.defaults = {
nPercent : 50,
showPercentText : true,
circleSize : 100,
thickness : 3
};
})( jQuery );
