纯CSS3的loading图案

转自：http://www.cssplay.co.uk/menu/cssplay-loading-animation.html

<div class="loading one"></div>
<div class="loading2 three"></div>

<style>
div.loading {width:200px; height:200px; position:relative; float:left; margin:0 10px;}
div.one {background:#09c;}

div.loading:after {display:block; content:"";
border-radius:2px;
height:2px; width:2px;
position:absolute;
margin:auto; left:0; top:0; right:0; bottom:0;
box-shadow:
10px 0 0 2px #eee,
7px 7px 0 2px #555,
0 10px 0 2px #555,
-7px 7px 0 2px #555,
-10px 0 0 2px #555,
-7px -7px 0 2px #888,
0 -10px 0 2px #ccc,
7px -7px 0 2px #ddd;

-webkit-animation:rotate 0.8s steps(8) infinite;
-o-animation:rotate 0.8s steps(8) infinite;
animation:rotate 0.8s steps(8) infinite;
}

@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-o-keyframes rotate {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}

/* second method */
div.loading2 {width:200px; height:200px; position:relative; float:left; margin:0 10px;}
div.three {background:#222;}

div.loading2 {width:200px; height:200px; background:#222; position:relative;}
div.loading2:before,
div.loading2:after {position:absolute; margin:auto; z-index:10; left:0; top:0; right:0; bottom:0; content:""; display:block; width:20px; height:20px; border:5px solid #fff; border-color:rgba(255,255,255,0.6) rgba(255,255,255,0.08) rgba(255,255,255,0.1) rgba(255,255,255,0.2) ; border-radius:200px;
}
div.loading2:before {
-webkit-animation:rotate1 1s steps(8) infinite;
-o-animation:rotate1 1s steps(8) infinite;
animation:rotate1 1s steps(8) infinite;
}
div.loading2:after {
-webkit-animation:rotate2 1s steps(8) infinite;
-o-animation:rotate2 1s steps(8) infinite;
animation:rotate2 1s steps(8) infinite;
}

@keyframes rotate1 {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

@-webkit-keyframes rotate1 {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

@-o-keyframes rotate1 {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}

@keyframes rotate2 {
from {transform: rotate(-45deg);}
to {transform: rotate(315deg);}
}

@-webkit-keyframes rotate2 {
from {-webkit-transform: rotate(-45deg);}
to {-webkit-transform: rotate(315deg);}
}

@-o-keyframes rotate2 {
from {-o-transform: rotate(-45deg);}
to {-o-transform: rotate(315deg);}
}

</style>