DEV Community 👩‍💻👨‍💻

Cover image for Making of Three Dots Jumping Loader or Loading Status Animation using Vanilla CSS only
Designing Coder
Designing Coder

Posted on • Originally published at designingcoder.hashnode.dev

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>
Enter fullscreen mode Exit fullscreen mode
    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;
    }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
   .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;
    }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
    .caption {
      margin: auto;
      font-family: arial;
      font-size: 20px;
      color: white;
    }
Enter fullscreen mode Exit fullscreen mode

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;
    }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.