<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="circle">
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div>
</div>
</div>
.circle *, .circle *:before, .circle *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.circle {
position: relative;
font-size: 120px;
width: 1em;
height: 1em;
border-radius: 50%;
float: left;
}
.circle:after {
position: absolute;
top: 0.08em;
left: 0.08em;
display: block;
content: " ";
border-radius: 50%;
width: 0.84em;
height: 0.84em;
}
.circle .slice {
position: absolute;
width: 1em;
height: 1em;
clip: rect(auto,auto,auto,auto);
animation-name: slice;
animation-duration: 1s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
@keyframes slice {
0% {
clip: rect(0em,1em,1em,0.5em);
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
49% {
clip: rect(0em,1em,1em,0.5em);
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
50% {
clip: rect(auto,auto,auto,auto);
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
100% {
clip: rect(auto,auto,auto,auto);
}
}
.circle .bar {
position: absolute;
border: 0.08em solid #1f7dd2;
width: 0.84em;
height: 0.84em;
clip: rect(0em,0.5em,1em,0em);
border-radius: 50%;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
animation-name: bar;
animation-duration: 0.5s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes bar {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
@keyframes bar {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
100% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
}
.circle .fill {
position: absolute;
border: 0.08em solid #1f7dd2;
width: 0.84em;
height: 0.84em;
clip: rect(0em,0.5em,1em,0em);
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
animation-name: fill;
animation-duration: 0.5s;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
animation-delay: 0.5s;
}
@-webkit-keyframes fill {
0% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes fill {
0% {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
-webkit-animation-timing-function:linear;
animation-timing-function:linear;
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
