Document
html,body{
height:100%;
}
*{
margin:0;
padding:0;
}
img{
display:block;
width:80%;
height:auto;
margin:0 auto;
}
.loading{
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background:#fff;
}
.pic{
width:50px;
height:50px;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
li{
list-style:none;
width:6px;
height:50px;
background:blue;
float:left;
margin:0 2px;
-webkit-transform:scaleY(0.4);
-ms-transform:scaleY(0.4);
transform:scaleY(0.4);
-webkit-animation:hh 1s linear infinite;
animation:hh 1s linear infinite;
}
li:nth-child(2){
-webkit-animation-delay:0.2s;
animation-delay:0.2s;
}
li:nth-child(3){
-webkit-animation-delay:0.4s;
animation-delay:0.4s;
}
li:nth-child(4){
-webkit-animation-delay:0.6s;
animation-delay:0.6s;
}
li:nth-child(5){
-webkit-animation-delay:0.8s;
animation-delay:0.8s;
}
@-webkit-keyframes hh{
0%{
-webkit-transform:scaleY(0.4);
transform:scaleY(0.4);
}
20%{
-webkit-transform:scaleY(1);
transform:scaleY(1);
}
40%{
-webkit-transform:scaleY(0.4);
transform:scaleY(0.4);
}
100%{
-webkit-transform:scaleY(0.4);
transform:scaleY(0.4);
}
}
@keyframes hh{
0%{
-webkit-transform:scaleY(0.4);
transform:scaleY(0.4);
}
20%{
-webkit-transform:scaleY(1);
transform:scaleY(1);
}
40%{
-webkit-transform:scaleY(0.4);
transform:scaleY(0.4);
}
100%{
-webkit-transform:scaleY(0.4);
transform:scaleY(0.4);
}
}
document.onreadystatechange = function(){ if(document.readyState == 'complete'){ $('.loading').fadeOut(); } }