加载效果

.loading {
    width: 4px; height: 4px;
    border-radius: 100%;
    color: rgba(0, 0, 0, .4);
    box-shadow: 0 -10px rgba(0,0,0,.9), 
        10px 0px,                 
        0 10px,                    
        -10px 0 rgba(0,0,0,.7),   
        -7px -7px rgba(0,0,0,.8),  
        7px -7px rgba(0,0,0,1),    
        7px 7px,                   
        -7px 7px;                 
    animation: spin 1s steps(8) infinite;
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

• radial-gradient

.loading {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: conic-gradient(deepskyblue, 30%, white);
    --mask: radial-gradient(closest-side, transparent 75%, black 76%);
    -webkit-mask-image: var(--mask);
    mask-image: var(--mask);
    animation: spin 1s linear infinite reverse;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}