Back

Pulsing loader

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

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>

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;
        }

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;
        }

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;
            }
        }

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  -->
        }

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;
        }

And that's it. Simple, huh?

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

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

<style>
.loader {
  position: relative;
  width: 10rem;
  height: 10rem;
}
.loader div {
  position: absolute;
  border: 10px solid rgb(151, 197, 12);
  border-radius: 50%;
  animation: load 2s ease-out infinite;
}
.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;
}
@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;
  }
}

</style>

Thank you for reading this article.

Pulsing loader

HTML

CSS

Video tutorial

Whole code

More loaders

Similar

See also