在react中实现一个简单的loading

效果

实现

JSX

import l from './loading.module.css';
export default function Loading() {
 return (
 <div className={l.loading} >
 <div className={l.circle} >
 <span/>
 <span/>
 <span/>
 <span/>
 <span/>
 <span/>
 <span/>
 <span/>
 </div>
 </div>
 )
}

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;
}