Effect preview

Online demo

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/jKVbyE

Interactive video tutorial

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/cD8nMUr

Source code download

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 with only one element:

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

Center:

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

Define the size of the container:

.loader {
    width: 10em;
    height: 3em;
    border: 0.3em solid silver;
    border-radius: 3em;
    font-size: 20px;
}

Paint the left and right sides of the container with different colors:

.loader {
    border-left-color: hotpink;
    border-right-color: dodgerblue;
}

Draw a small ball in the container:

.loader {
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    background-color: dodgerblue;
}

Allow the ball to move back and forth in the container:

.loader::before {
    animation: shift 3s linear infinite;
}

@keyframes shift {
    50% {
        left: 7em;
    }
}

Let the ball change color when it hits both ends:

.loader::before {
    animation:
        shift 3s linear infinite,
        change-color 3s linear infinite;
}

@keyframes change-color {
    0%, 55% {
        background-color: dodgerblue;
    }

    5%, 50% {
        background-color: hotpink;
    }
}

Finally, keep the container spinning:

.loader {
    animation: spin 3s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

be accomplished!

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