"circle progress bar"
Bootstrap 3.3.0 Snippet by ALIMUL AL RAZY

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
<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">
<div class="col-md-3 col-sm-6">
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">75%</div>
</div>
</div>
</div>
</div>
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
.progress{
width: 150px;
height: 150px;
line-height: 150px;
background: none;
margin: 0 auto;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

god job

AlbertUpload () - 7 years ago - Reply 1


It is not working.

Akshay MJ () - 7 years ago - Reply 0


this is really nice! but i get only the left side to work... still trying to figure out how this is working...

Enrique () - 7 years ago - Reply -2


how can i increase decrease the progress bar according to percentage

RajatVerma (-7) - 5 years ago - Reply -7


Works like a charm, for an easy use you can:

.progress .p-100 .progress-bar{

animation: loading-100 2s linear forwards;

}

.progress .p-90 .progress-bar{

animation: loading-90 1.8s linear forwards;

}

.progress .progress-left .progress-bar{

animation-delay: 2s;

}

@keyframes loading-90{

0%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(162deg);

transform: rotate(162deg);

}

}

@keyframes loading-100{

0%{

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

100%{

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

}

same with other values, hope it helps

trijulio () - 5 years ago - Reply 0