.Loading-warp {
width:100%;
height:100%;
background-color:#374140;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index:10000;
}
.Loading-warp .Loading {
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:180px;
height:20px;
display:flex;
justify-content:space-between;
}
.Loading-warp .Loading .Circle,.Circle2,.Circle3 {
width:20px;
height:100%;
background-color:#FFFFFF;
border-radius:50%;
animation:bounce 1.5s infinite ease-in-out;
opacity:0;
}
@keyframes bounce {
0%,100% {
transform:scale(0);
opacity:0;
}
50% {
transform:scale(1.2);
opacity:1;
}
}.Loading-warp .Loading .Circle2 {
animation-delay:.25s;
}
.Loading-warp .Loading .Circle3 {
animation-delay:.5s;
}
更新时间:2021-04-08 23:08:00
简单的一个加载动画,利用jquery让动画执行800毫秒之后消失