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