Creating a Loading Status or Building Process Animation using Vanilla CSS

In this article we will go through step by step to create Loading Status or Building Process animation using Vanilla CSS.

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 background theme

We wil use eminstead of px in css so we can change the size of the animation by change the font-size in the html.

    <div id="building" style="font-size:12px">
        <div id="blocks">
        </div>
        <div class="caption">
        </div>
    </div>

    body {
      background: #050115;
      color: #d5fff7;
      font-family: Arial;
      overflow: hidden;
    }

Step 2: Setting up space for blocks and caption

This will get our animation and caption to be at the center of the page, where caption is on the right side of the animation.

    #building {
      display: flex;
      width: 35em;
      height: 100vh;
      margin: auto;
    }
    #blocks {
      margin: auto;
    }
    #caption {
      padding-left: 0.5em;
      margin: auto;
      font-size: 2.5em;
    }

Step 3: Adding the blocks

Since we are going to have 4 identical blocks we give them a commom class as b and for adjustment we provide them unique ids as b1, b2, b3 and b4.

        <div id="blocks">
            <div class="b" id="b1"></div>
            <div class="b" id="b2"></div>
            <div class="b" id="b3"></div>
            <div class="b" id="b4"></div>
        </div>

    .b {
      background: #d5fff7;
      border: 0.3em solid #89f2f2;
      width: 4.5em;
      height: 4.5em;
      border-radius: 0.5em;
      margin: 1em;
      position: relative;
    }

Now we have our four boxes. Next we will position them.

Step 4: Positioning the boxes

We will position b2, b3 and b4 relative to b1

    #b2 {
      margin-left: 7.25em;
    }
    #b3 {
      margin-top: -6em;
    }
    #b4 {
      margin-left: 7.25em;
    }

Step 5: Animating the blocks

We have four blocks so we need to provide them unique animation name and animate them differently. But they will have same animation-duration, animation-iteration-count and animation-timing-function. So we do as below.

    .b{
    ...
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    }
    #b1 {
        animation-name: b1;
    }
    #b2 {
      ...
        animation-name: b2; 
    }
    #b3 {
      ...
        animation-name: b3;
    }
    #b4 {
      ...
        animation-name: b4;
    }
    @keyframes b1 {
      0% {
        left: 0em;
        transform: rotate(0deg);
      }
      50% {
        left: 6.25em;
        bottom: 0em;
        transform: rotate(90deg);
      }
      100% {
        left: 6.25em;
        bottom: -6.125em;
        transform: rotate(90deg);
      }
    }
    @keyframes b2 {
      50% {
        bottom: 0em;
      }
      100% {
        bottom: -6.125em;
      }
    }
    @keyframes b3 {
      50% {
        top: 0em;
      }
      100% {
        top: -6.125em;
      }
    }
    @keyframes b4 {
      0% {
        left: 0em;
        transform: rotate(0deg);
      }
      50% {
        left: -6.25em;
        top: 0em;
        transform: rotate(90deg);
      }
      100% {
        left: -6.25em;
        top: -6.125em;
        transform: rotate(90deg);
      }
    }

Step 6: Adding Caption and adjusting for small screen

Here you can do something different may be position the caption below the animation, but I prefer it hidden in small-screens.

    <div id="caption">
        Your product is almost ready...
    </div>

    @media (max-width: 400px) {
      #building {
        width: 100%;
      }
      #caption {
        display: none;
      }
    }

Thankyou for reading. You can subscribe to following links for more updates.
Social Media Links: https://designingcoder.github.io