CSS效果——实现loading加载特效

CSS效果——实现loading加载特效

---

效果图：

---

<!--制作一个圆-->
<div class="circle"></div>
<!--按钮——用于触发加载效果-->
<input type="button" value="点击" onclick="submit()">

.circle{
    width: 150px;
    height: 80px;
    border-radius: 100px 100px 0 0;
    border: 10px solid skyblue;
    border-bottom: none;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -100px;
    animation: none;
    transform-origin:bottom;
    box-sizing: border-box;
    display: none;
    z-index: 1005;
}
@keyframes a{
    0%{
       transform: rotate(0deg);
    }
    100%{
       transform: rotate(360deg);
    }
}

function submit(){
    let circle= document.getElementsByClassName("circle")[0];
    circle.style.display="block";
    circle.style.animation="a 1s infinite";
    document.body.style.background="rgba(0,0,0,0.6)";
    setTimeout(()=>{
         circle.style.display="none";
         document.body.style.background="rgba(255,255,255,0)";
         circle.style.animation="none";
     },5500)
}