DEV Community

Designyff
Designyff

Posted on • Originally published at designyff.com

Pulsing loader - A step-by-step guide

Tutorial on how to create a beautiful pulse loader - CSS & HTML only.

Pulsing loader

HTML

For HTML we need a container with 4 divs. We'll add "loader" class to a container.

<div class="loader">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

For CSS, first we'll style the "loader" element.
We'll set position to relative and width and height to 10 rem.

.loader {
    position: relative;
    width: 10rem;
    height: 10rem;
}
Enter fullscreen mode Exit fullscreen mode

Now we'll style the divs inside the "loader" element.
We'll set position to absolute and border to 10px solid light green with 50% radius.
These elements represent the moving lines. We have 4 of them.

.loader div {
    position: absolute;
    border: 10px solid rgb(151, 197, 12);
    border-radius: 50%;
    animation: load 2s ease-out infinite;
}
Enter fullscreen mode Exit fullscreen mode

Now we'll create a "load" animation for our 4 lines.
By changing top, left, width and height properties, we'll create expanding effect.
And by adding the opacity property to 1 at 5% and back to 0 at 100%, we'll create a nice disappearing effect.


@keyframes load {
    0% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 4rem;
        left: 4rem;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 8rem;
        height: 8rem;
        opacity: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

Now we'll simply add the animation to all of our div elements.
We'll set it to 2 second duration, infinite, ease out.

.loader div {
    position: absolute;
    border: 10px solid rgb(151, 197, 12);
    border-radius: 50%;
    animation: load 2s ease-out infinite; /* Added animation */
}
Enter fullscreen mode Exit fullscreen mode

As we have 4 lines, we need to set the beginning of the animation at different time to each element.
For the First element, animation will begin at 0, so we won't change anything.
Now we'll select the second element using the nth child selector and passing in number "2". We'll set delay to -0.5 seconds.
For third element, we'll set animation delay to -1 second.
And for the last element, we'll set delay to -1.5 second.

.loader div:nth-child(2) {
    animation-delay: -0.5s;
}
.loader div:nth-child(3) {
    animation-delay: -1s;
}
.loader div:nth-child(4) {
    animation-delay: -1.5s;
}
Enter fullscreen mode Exit fullscreen mode

And that's it. Simple, huh?

You can find video tutorial and full code here.

Thanks for reading. ❤️

Top comments (0)