"Circle Progress Indicator"
Bootstrap 3.3.0 Snippet by imanfakhar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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);
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/****************************************************************
*
* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
( 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: