Making of Three Dots Jumping Loader or Loading Status Animation using Vanilla CSS only

Let's go step-by-step walk-through on How to Make a Simple Three Dots Jumping Loader or Loading Status Animation using Vanilla or Pure CSS only.
If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.

Step-1: Setting up theme and container

Firstly, we will create a container in which we can have our loader and caption. The following will place the container at the centre of the page.

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

    body {
      display: flex;
      height: 100vh;
      background: midnightblue;
      overflow: hidden;
    }
    .container {
      display: flex;
      max-width: max-content;
      flex-direction: column;
      margin: auto;
      border: 1px solid yellow;
    }

We have added a yellow border for the ease of visualisation, which should be removed at the end.

Step-2: Adding the three dots

Now we will add the three dots. Since all the three dots have similar look, we can provide them a common class as circle and assign unique ids as a, b and c for animation purpose(you'll find why and how as we proceed further).


Here also we have added yellow border for the ease of visualisation, which should be removed at the end.

    <div class ="container">
      <div class="loader">
        <div class="circle" id="a"></div>
        <div class="circle" id="b"></div>
        <div class="circle" id="c"></div>
      </div>
      <div class="caption"></div>
    </div>

   .loader {
      width: 180px;
      height: 80px;
      margin: auto;
      display: flex;
      border: 1px solid yellow;
    }
    .circle {
      width: 30px;
      height: 30px;
      background: white;
      border-radius: 50%;
      margin: 0 15px;
    }

Step-3: Adding the caption

Let's add our caption and make sure it is properly placed properly with respect to the loader.

    <div>
        <div class="loader">
        ...
        </div>
      <div class="caption">We are almost there...</div>
    </div>

    .caption {
      margin: auto;
      font-family: arial;
      font-size: 20px;
      color: white;
    }

Step-4: Animating the loader

We add a common animation property with animation-name as jump, animation-duration as 1 second, animation-timing-function as linear and animation-iteration-count as infinite. To make them jump at different time, we add animation-dealy to ids b and c.

    circle {
        ...
        animation: jump 1s linear infinite
    }
    @keyframes jump {
      0% {
        margin-top: 0;
      }
      35% {
        margin-top: -75px;
      }
      70% {
        margin-top: 0px;
      }
    }


    #b {
      animation-delay: 0.2s;
    }
    #c {
      animation-delay: 0.4s;
    }

Now we can remove the yellow border, we don't need them anymore. Finally, we have our loading animation ready. Thank you for reading.You can also watch a How To YouTube Video on this topic.

Feel free to connect on Social Media. Please feel free to drop you opinion or any helpful tips.

Social Media Links: https://designingcoder.github.io