ローディング効果を実現するCSS

<div class="pc_mask">
<div class="spinner"></div>
</div>
.pc_mask {
    
    
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    background: rgba(255, 255, 255, 0.8);
}
/* spinner 动画样式 */
.pc_mask > .spinner {
    
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #33a7ff;
    border-top-color: #fff;
    animation: spinner-rotate .8s ease-in-out infinite; /* 动画属性 */
}

/* 动画关键帧 */
@keyframes spinner-rotate {
    
    
    0% {
    
    
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
    
    
        transform: translate(-50%, -50%) rotate(360deg);
    }
}