"Circle Progress Indicator"
Bootstrap 3.3.0 Snippet by imanfakhar

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

Questions / Comments:

Related: See More