Use pure CSS to create a pulsating loader effect source code

Effect Preview

Press the "Click to 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/wYvGwr

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

Source code download

Please download the full source code of the Daily Front-end Practice Series from GitHub:

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

Code Interpretation

Define DOM, the container contains 10 child elements:

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

Center display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(#eee 70%, pink);
}

Set the container style to a circle with a pink background and stroke:

.loader {
    width: 6em;
    height: 6em;
    padding: 3em;
    font-size: 10px;
    background-color: pink;
    border-radius: 50%;
    border: 0.8em solid hotpink;
}

Set the layout of child elements to horizontal tiling:

.loader {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

To set the style of a child element:

.loader > span {
    width: 0.5em;
    height: 50%;
    background-color: deeppink;
}

Add animation effects to child elements:

.loader > span {
    transform: scaleY(0.05) translateX(-0.5em);
    animation: span-animate 1.5s infinite ease-in-out;
}
@keyframes span-animate {
    0%, 100% {
        transform: scaleY(0.05) translateX(-0.5em);
    }
    15% {
        transform: scaleY(1.2) translateX(1em);
    }
    90%, 100% {
        background-color: hotpink;
    }
}

Set the sub-element index to let the sub-elements play animations in sequence:

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

.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; }
.loader > span:nth-child(6) { --n: 6; }
.loader > span:nth-child(7) { --n: 7; }
.loader > span:nth-child(8) { --n: 8; }
.loader > span:nth-child(9) { --n: 9; }
.loader > span:nth-child(10) { --n: 10; }

Add container animation to enhance the pulsation effect:

.loader {
    animation: loader-animate 1.5s infinite ease-in-out;
}
@keyframes loader-animate {
    45%, 55% {
        transform: scale(1.05);
    }
}

Summarize

The above is the source code of creating a pulsating loader effect using pure CSS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<: The whole process of configuring reverse proxy locally through nginx

>>: Example of creating table statements for user Scott in MySQL version of Oracle