1
1.html部分
<div id="preloader">
<div class="sk-spinner sk-spinner-wave" id="status">
<div class="sk-rect1"></div>
<div class="sk-rect2"></div>
<div class="sk-rect3"></div>
<div class="sk-rect4"></div>
<div class="sk-rect5"></div>
</div>
</div>
2.css部分
#preloader {
position: fixed;
top:0;
left:0;
right:0;
width:100%;
height:100%;
bottom:0;
background-color:#1A80C3;
z-index:999999;
}
.sk-spinner-wave.sk-spinner {
margin:-15px 0 0 -25px;
position:absolute;
left:50%;
top:50%;
width: 50px;
height: 30px;
text-align: center;
font-size: 10px;
}
.sk-spinner-wave div {
background-color: #fff;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
}
.sk-spinner-wave .sk-rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
.sk-spinner-wave .sk-rect3 {-webkit-animation-delay: -1s;animation-delay: -1s;}
.sk-spinner-wave .sk-rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
.sk-spinner-wave .sk-rect5 { -webkit-animation-delay: -0.8s;animation-delay: -0.8s;}
@-webkit-keyframes sk-waveStretchDelay {
0%, 40%, 100% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
20% { -webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes sk-waveStretchDelay {
0%, 40%, 100% {-webkit-transform: scaleY(0.4);transform: scaleY(0.4);}
20% { -webkit-transform: scaleY(1);transform: scaleY(1);}
}
3.js部分;这里使用jquery
$(document).ready(function () {
$('#preloader').show();
$('#status').show()
});