SOURCE

<div class="box">
    <div class="loader">
        <span style="--i:1"></span>
        <span style="--i:2"></span>
        <span style="--i:3"></span>
        <span style="--i:4"></span>
        <span style="--i:5"></span>
        <span style="--i:6"></span>
        <span style="--i:7"></span>
        <span style="--i:8"></span>
        <span style="--i:9"></span>
        <span style="--i:10"></span>
        <span style="--i:11"></span>
        <span style="--i:12"></span>
    </div>
</div>

.box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 50px;
    background-color: #222;
}
.loader {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    animation: rotate 24s linear infinite;
}
/* 盒子转动动画 */
@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.loader span {
    position: absolute;
    width: 100%;
    height: 100%;
    /* 元素中获取i值确定小球位置 */
    transform: rotate(calc(30deg * var(--i)));
}
/* 伪元素制定小球 */
.loader span::before {
    content: "";
    position: absolute;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
}
/* 每隔几个小球加一个高亮和跳动动画 */
.loader span:nth-child(3n + 3)::before {
    background-color: #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff,
    0 0 50px #fff;
    animation: jump 2s linear infinite;
    transform-origin: 75px;
}
/* 小球跳动动画 */
@keyframes jump {
    0%,25% {
        transform: rotate(0deg);
    }
    75%,90%,100% {
        transform: rotate(180deg);
    }
}
.box:nth-child(2) .loader {
    animation-timing-function: steps(12);
}