在react中实现一个简单的loading

效果

实现

JSX

import l from './loading.module.css';

export default function Loading() {
    return (
        

            

                
                
                
                
                
                
                
                
            
        
    )
}

CSS

.loading {
    width: 128px;
    height: 128px;
    position: fixed;
    top: calc(50vh - 128px/2);
    left: calc(50vw - 128px/2);
    background: rgba(0, 0, 0, .2);
    backdrop-filter: saturate(180%) blur(20px);
    border-radius: 16px;
}

.circle {
    width: 96px;
    height: 96px;
    position: absolute;
    top: 16px;
    left: 16px;
    border-radius: 50%;
}

.circle span {
    width: 16px;
    height: 16px;
    background: black;
    border-radius: 50%;
    position: absolute;
    animation: o .8s 0s ease infinite;
}

@keyframes o {
    from {
        opacity: 1;
    }
    to {
        opacity: .1;
    }
}

.circle span:first-child {
    left: calc(96px/2 - 8px);
}

.circle span:nth-child(2) {
    left: calc(96px/2 + 28.28px - 16px/2);
    top: calc(96px/2 - 28.28px - 16px/2);
    animation-delay: .1s;
}

.circle span:nth-child(3) {
    left: calc(96px - 16px);
    top: calc(96px/2 - 16px/2);
    animation-delay: .2s;
}

.circle span:nth-child(4) {
    left: calc(96px/2 + 28.28px - 16px/2);
    top: calc(96px/2 + 28.28px - 16px/2);
    animation-delay: .3s;
}

.circle span:nth-child(5) {
    left: calc(96px/2 - 8px);
    top: calc(96px - 16px);
    animation-delay: .4s;
}

.circle span:nth-child(6) {
    left: calc(96px/2 - 16px/2 - 28.28px);
    top: calc(96px/2 + 28.28px - 16px/2);
    animation-delay: .5s;
}

.circle span:nth-child(7) {
    top: calc(96px/2 - 16px/2);
    animation-delay: .6s;
}

.circle span:last-child {
    left: calc(96px/2 - 16px/2 - 28.28px);
    top: calc(96px/2 - 28.28px - 16px/2);
    animation-delay: .7s;
}