CSS代码

.loading_box {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 66;
}
.loader-inner, .loading, .loading_text {
position: absolute;
top: 50%;
}
.loading_text {
color: #2a2474;
font-family: "微软雅黑";
font-size: 22px;
left: 50%;
margin-left: -36px;
margin-top: 40px;
width: 60px;
}
.loader-inner {
height: 100px;
left: 0;
margin-top: -112px;
width: 100%;
}
.inneer1 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.1s normal none infinite running line-scale;
background: #940914 none repeat scroll 0 0;
}
.inneer2 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.2s normal none infinite running line-scale;
background: #7a0f2c none repeat scroll 0 0;
}
.inneer3 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.3s normal none infinite running line-scale;
background: #621641 none repeat scroll 0 0;
}
.inneer4 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.4s normal none infinite running line-scale;
background: #401e60 none repeat scroll 0 0;
}
.inneer5 {
animation: 1s cubic-bezier(0.2, 0.68, 0.18, 1.08) 0.5s normal none infinite running line-scale;
background: #2a2474 none repeat scroll 0 0;
}
.line-scale > div {
animation-fill-mode: both;
border-radius: 5px;
display: inline-block;
height: 100px;
margin-right: 5px;
width: 12px;
}
@keyframes line-scale {
0%, 100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.4);
}
}
.loading {
display: inline-block;
height: 60px;
left: 50%;
margin-left: -42px;
margin-right: 40px;
margin-top: -42px;
width: 60px;
z-index: 66;
}
.chart {
height: 500px;
margin: 0 auto;
width: 1000px;
}
@keyframes heightdownup {
0% {
height: 40px;
}
100% {
height: 80px;
}
}
@keyframes fromTop {
0% {
transform: translateY(-300%);
}
100% {
transform: translateY(0px);
}
}
@keyframes fromTop {
0% {
transform: translateY(-300%);
}
100% {
transform: translateY(0px);
}
}
@keyframes fromDown {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0px);
}
}
@keyframes fromDown {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0px);
}
}

HTML代码

<div class="loading_box">   
<div class="loader-inner line-scale">          
<div class="inneer1"></div>           
<div class="inneer2"></div>           
<div class="inneer3"></div>          
<div class="inneer4"></div>        
<div class="inneer5"></div>        
</div>   
<div class="loading_text">Loading...</div>
</div>
<a class="banner_next fromTopDown" href="#conter2"></a>