https://blog.csdn.net/weixin_42568343/article/details/82499625
index.html
<div id="Loading">
<div class="loader-inner ball-beat">
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="app"></div>
App.vue
let loading =document.getElementById('Loading')
if(loading!=null){
document.body.removeChild(loading)
}
index.html
<style type="text/css">
#Loading{
top: 50%;
left: 50%;
position: absolute;
transform: translateY(-50%) translateX(-50%);
z-index: 100;
}
@keyframes ball-beat{
50%{
opacity: 0.2;
transform: scale(0.75);
}
100%{
opacity: 1;
transform: scale(1);
}
}
.ball-beat > div{
background-color: #279fcf;
width: 10px;
height: 10px;
border-radius: 100%!important;
margin: 2px;
animation-fill-mode: both;
display: inline-block;
animation: ball-beat 0.7s 0s infinite linear;
}
.ball-beat > div:nth-child(2n-1){
animation-delay: 0.35s!important;
}
</style>
