这个效果提取自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 )}}
.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>
<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>