Effect preview

Press the "click preview" button on the right to preview on the current page, and click the link to preview in full screen.

https://codepen.io/comehope/pen/gKNMMm

Interactive video

This video is interactive. You can pause the video at any time and edit the code in the video.

Please use chrome, safari, edge to open and watch.

https://scrimba.com/p/pEgDAM/cd339Ur

Source code download

Online demo
Download locally

Please download all the source code of the daily front-end combat series from github:

https://github.com/comehope/front-end-daily-challenges

Code interpretation

Define dom, which contains 5 elements:

<div class="loader">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Center:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: goldenrod;
}

Define container size:

.loader {
    width: 8em;
    height: 8em;
    font-size: 30px;
}

Draw the dots:

.loader span {
    position: absolute;
    top: 4em;
    width: 1em;
    height: 1em;
    background-color: #222;
    border-radius: 50%;
}

Define animation effects:

.loader span {
    transform-origin: 4em top;
    animation: dance 1s linear infinite;
}

@keyframes dance {
    to {
        transform: rotateX(360deg) rotateZ(360deg);
    }
}

Finally, add animation delay for each dot:

.loader span {
    animation-delay: calc((var(--n) - 5) * 0.1s);
}

.loader span:nth-child(1) {
    --n: 1;
}

.loader span:nth-child(2) {
    --n: 2;
}

.loader span:nth-child(3) {
    --n: 3;
}

.loader span:nth-child(4) {
    --n: 4;
}

.loader span:nth-child(5) {
    --n: 5;
}

be accomplished!

Original address: https://segmentfault.com/a/119000015534639