css3加载动画loading

<!--html-->
<div class="spinner"><i></i></div>

/*css*/
.spinner {display: inline-block; vertical-align: middle;margin-right: 0.4em;font-size: 1em;width: 1em;height: 1em;text-align: left;border-radius: 50%;box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .3);}
.spinner i { position: absolute; clip: rect(0, 1em, 1em, .5em); width: 1em; height: 1em; animation: spinner-circle-clipper 1s ease-in-out infinite; -webkit-animation: spinner-circle-clipper 1s ease-in-out infinite; }
@keyframes spinner-circle-clipper {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes spinner-circle-clipper {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}
.spinner i:after { position: absolute; clip: rect(0, 1em, 1em, .5em); width: 1em; height: 1em; content: ''; animation: spinner-circle 1s ease-in-out infinite; -webkit-animation: spinner-circle 1s ease-in-out infinite; border-radius: 50%; box-shadow: inset 0 0 0 .1em #3aa8ed; }
@keyframes spinner-circle {
0% {
transform: rotate(-180deg);
}
100% {
transform: rotate(180deg);
}
}
@-webkit-keyframes spinner-circle {
0% {
-webkit-transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(180deg);
}
}