css3 圆圈进度条,小码哥-纯CSS3 实现圆形进度条

.spinner {

font-size: 20px;

width: 1em;

height: 1em;

border-radius: 50%;

box-shadow: inset000.1emrgba(58, 168, 237, .2);

}

.spinner i {

position: absolute;

clip: rect(0, 1em, 1em, .5em);

width: 1em;

height: 1em;

animation: spinner-circle-clipper 1s ease-in-out infinite;}@keyframes spinner-circle-clipper {

0%{

transform: rotate(0deg);

}

100%{

transform: rotate(180deg);

}}

.spinner i:after {

position: absolute;

clip: rect(0, 1em, 1em, .5em);

width: 1em;

height: 1em;

content: '';

animation: spinner-circle1s ease-in-out infinite;

border-radius: 50%;

box-shadow: inset000.1em#3aa8ed;}@keyframes spinner-circle{

0%{

transform: rotate(-180deg);

}

100%{

transform: rotate(180deg);

}}