HTML:
<div id="load" class="loading">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
CSS:
.loading {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 20px;
margin: auto;
text-align: center;
}
.loading span {
display: inline-block;
width: 8px;
height: 100%;
border-radius: 4px;
background-color: lightgreen;
margin: 0 2px;
animation: load 1s ease infinite;
}
@keyframes load {
0%,
100% {
transform: scaleY(4.5);
border-radius: 8px;
background-color: lightgreen;
}
50% {
transform: scaleY(1);
border-radius: 6px;
background-color: lightblue;
}
}
.loading span:nth-child(2) {
animation-delay: 0.2s;
}
.loading span:nth-child(3) {
animation-delay: 0.4s;
}
.loading span:nth-child(4) {
animation-delay: 0.6s;
}
.loading span:nth-child(5) {
animation-delay: 0.8s;
}
JS:
// 封装显示加载动画
function setShowLoad() {
$("#load").css("display", "block");
}
// 封装隐藏加载动画
function setHideLoad() {
$("#load").css("display", "none");
}
// 模拟页面加载效果
$(window).ready(function () {
setShowLoad();
})
setTimeout(function () {
setHideLoad();
}, 3000)