css:
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 102;
background: rgb(23, 23, 23);
}
.loading .load_pic {
width: 50px;
height: 50px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.load_pic i {
display: block;
float: left;
width: 6px;
height: 50px;
background: #fff;
margin: 0 2px;
-webkit-transform: scaleY(0.4);
-ms-transform: scaleY(0.4);
transform: scaleY(0.4);
-webkit-animation: load 1.2s infinite;
animation: load 1.2s infinite;
}
.load_pic i:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.load_pic i:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.load_pic i:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.load_pic i:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
@-webkit-keyframes load {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1)
}
}
@keyframes load {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4)
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1)
}
}
html:
<div class="loading">
<div class="load_pic"><i></i><i></i><i></i><i></i><i></i></div>
</div>