手动遮罩loading

html:
"
div class=‘localCover’
div class=“loader”
span span span span span
div
div
"

css:
.localCover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, .8);
z-index: 2100;
display: flex;
align-items: center;
justify-content: center;
}
.localCover .loader{
display: flex;
padding-bottom: 50px;
}
.localCover .loader span{
display: block;
background: #0078FF;
width: 6px;
height: 12px;
margin: 0 4px;
margin-top: 25%;
}
.localCover .loader span:nth-child(1){
animation: load 1.2s .2s infinite linear;
}
.localCover .loader span:nth-child(2){
animation: load 1.2s .4s infinite linear;
}
.localCover .loader span:nth-child(3){
animation: load 1.2s .6s infinite linear;
}
.localCover .loader span:nth-child(4){
animation: load 1.2s .8s infinite linear;
}
.localCover .loader span:nth-child(5){
animation: load 1.2s 1s infinite linear;
}
@keyframes load {
0% {
transform: scaleY(1);
}
50% {
transform: scaleY(5);
}
100% {
transform: scaleY(1);
}
}