使用CSS3制作loading效果

这个效果提取自Sencha Touch框架，也是在sencha touch的项目中偶然发现loading效果竟然是用纯css3写的，于是提取了出来供各位童鞋一同研究.

使用了keyframes来使动画反复循环，在webkit内核浏览器下表现的很好，目前是webkit only，火狐也请绕道吧。

下面放主要代码和demo，一demo胜千言啊。

主要样式：

.x-loading-spinner { font-size : 250 %; height : 1em; width : 1em; position : relative; - webkit - transform - origin : 0.5em   0.5em }
.x-loading-spinner   >   span , .x-loading-spinner   >   span :before , .x-loading-spinner   >   span :after { display : block; position : absolute; width : 0.1em; height : 0.25em; top : 0; - webkit - transform - origin : 0.05em   0.5em; - webkit - border - radius : 0.05em; border - radius : 0.05em; content : " " }
.x-loading-spinner   >   span .x-loading-top { background-color : rgba( 170 ,   170 ,   170 , 0 . 99 )}
.x-loading-spinner   >   span .x-loading-top : :after { background-color : rgba( 170 ,   170 ,   170 ,   0 . 9 )}
.x-loading-spinner   >   span .x-loading-left : :before { background-color : rgba( 170 ,   170 ,   170 ,   0 . 8 )}
.x-loading-spinner   >   span .x-loading-left { background-color : rgba( 170 ,   170 ,   170 ,   0 . 7 )}
.x-loading-spinner   >   span .x-loading-left : :after { background-color : rgba( 170 ,   170 ,   170 ,   0 . 6 )}
.x-loading-spinner   >   span .x-loading-bottom : :before { background-color : rgba( 170 ,   170 ,   170 ,   0 . 5 )}
.x-loading-spinner   >   span .x-loading-bottom { background-color : rgba( 170 ,   170 ,   170 ,   0 . 4 )}
.x-loading-spinner   >   span .x-loading-bottom : :after { background-color : rgba( 170 , 170 ,   170 ,   0 . 35 )}
.x-loading-spinner   >   span .x-loading-right : :before { background-color : rgba( 170 , 170 ,   170 ,   0 . 3 )}
.x-loading-spinner   >   span .x-loading-right { background-color : rgba( 170 ,   170 ,   170 ,   0 . 25 )}
.x-loading-spinner   >   span .x-loading-right : :after { background-color : rgba( 170 ,   170 ,   170 ,   0 . 2 )}
.x-loading-spinner   >   span .x-loading-top : :before { background-color : rgba( 170 ,   170 ,   170 ,   0 . 15 )}
.x-loading-spinner   >   span { left : 50 %; margin-left :- 0.05em }
.x-loading-spinner   >   span .x-loading-top { - webkit - transform : rotate( 0 deg); - moz - transform : rotate( 0 deg )}
.x-loading-spinner   >   span .x-loading-right { - webkit - transform : rotate( 90 deg); - moz - transform : rotate( 90 deg )}
.x-loading-spinner   >   span .x-loading-bottom { - webkit - transform : rotate( 180 deg); - moz - transform : rotate( 180 deg )}
.x-loading-spinner   >   span .x-loading-left { - webkit - transform : rotate( 270 deg); - moz - transform : rotate( 270 deg )}
.x-loading-spinner   >   span : :before { - webkit - transform : rotate( 30 deg); - moz - transform : rotate( 30 deg )}
.x-loading-spinner   >   span : :after { - webkit - transform : rotate( -30 deg); - moz - transform : rotate( -30 deg )}
.x-loading-spinner { - webkit - animation - name :x - loading - spinner - rotate; - webkit - animation - duration :. 5s; - webkit - animation - iteration - count : infinite; - webkit - animation - timing - function : linear }
          @-webkit-keyframes   x-loading-spinner-rotate { 0 % { - webkit - transform : rotate( 0 deg )} 8 .32 % { - webkit - transform : rotate( 0 deg )} 8 .33 % { - webkit - transform : rotate( 30 deg )} 16 .65 % { - webkit - transform : rotate( 30 deg )} 16 .66 % { - webkit - transform : rotate( 60 deg )} 24 .99 % { - webkit - transform : rotate( 60 deg )} 25 % { - webkit - transform : rotate( 90 deg )} 33 .32 % { - webkit - transform : rotate( 90 deg )} 33 .33 % { - webkit - transform : rotate( 120 deg )} 41 .65 % { - webkit - transform : rotate( 120 deg )} 41 .66 % { - webkit - transform : rotate( 150 deg )} 49 .99 % { - webkit - transform : rotate( 150 deg )} 50 % { - webkit - transform : rotate( 180 deg )} 58 .32 % { - webkit - transform : rotate( 180 deg )} 58 .33 % { - webkit - transform : rotate( 210 deg )} 66 .65 % { - webkit - transform : rotate( 210 deg )} 66 .66 % { - webkit - transform : rotate( 240 deg )} 74 .99 % { - webkit - transform : rotate( 240 deg )} 75 % { - webkit - transform : rotate( 270 deg )} 83 .32 % { - webkit - transform : rotate( 270 deg )} 83 .33 % { - webkit - transform : rotate( 300 deg )} 91 .65 % { - webkit - transform : rotate( 300 deg )} 91 .66 % { - webkit - transform : rotate( 330 deg )} 100 % { - webkit - transform : rotate( 330 deg )}}

HTML结构

<div   class= "x-mask-loading"   style= "text-align:center;margin:1em" >
    <div   class= "x-loading-spinner"   style= "margin:0 auto 7px;" >
    <span   class= "x-loading-top" ></span>
    <span   class= "x-loading-right" ></span>
    <span   class= "x-loading-bottom" ></span>
    <span   class= "x-loading-left" ></span>
    </div>
    <div   class= "x-loading-msg" >加载中… </div>
</div>