.loading {
background:#000;
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:99999
}
.loadingBox {
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
text-align:center;
width:100%;
}
.loadingBox p,span[class*=l-] {
text-align:center;
font:30px/40px arial
}
span[class*=l-] {
height:30px;
width:30px;
display:inline-block;
margin:24px 4px;
color:#fff;
border-radius:100%;
-webkit-border-radius:100%;
animation:loader 4s cubic-bezier(.030,.615,.995,.415) infinite both;
-webkit-animation:loader 4s cubic-bezier(.030,.615,.995,.415) infinite both;
}
@-webkit-keyframes loader {
0% {
-webkit-transform:translate3d(-60px,0,0);
transform:translate3d(-60px,0,0);
opacity:0
}
25% {
opacity:1
}
50% {
-webkit-transform:translate3d(60px,0,0);
transform:translate3d(60px,0,0);
opacity:0;
}
100% {
opacity:0
}
}@keyframes loader {
0% {
-webkit-transform:translate3d(-60px,0,0);
transform:translate3d(-60px,0,0);
opacity:0
}
25% {
opacity:1
}
50% {
-webkit-transform:translate3d(60px,0,0);
transform:translate3d(60px,0,0);
opacity:0
}
100% {
opacity:0
}
}span.l-1 {
-webkit-animation-delay:1.2s;
animation-delay:1.2s;
color:red
}
span.l-2 {
-webkit-animation-delay:1s;
animation-delay:1s
}
span.l-3 {
-webkit-animation-delay:.8s;
animation-delay:.8s
}
span.l-4 {
-webkit-animation-delay:.6s;
animation-delay:.6s
}
span.l-5 {
-webkit-animation-delay:.4s;
animation-delay:.4s;
color:red
}
span.l-6 {
-webkit-animation-delay:.2s;
animation-delay:.2s
}
span.l-7 {
-webkit-animation-delay:0s;
animation-delay:0s
}
加载动画 , 使用场景: 代码没有加载完成的加载页