DEV Community

Cover image for Creating a Loading Status or Building Process Animation using Vanilla CSS
Designing Coder
Designing Coder

Posted on • Updated on • Originally published at designingcoder.hashnode.dev

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>
Enter fullscreen mode Exit fullscreen mode
    body {
      background: #050115;
      color: #d5fff7;
      font-family: Arial;
      overflow: hidden;
    }
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode
    .b {
      background: #d5fff7;
      border: 0.3em solid #89f2f2;
      width: 4.5em;
      height: 4.5em;
      border-radius: 0.5em;
      margin: 1em;
      position: relative;
    }
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode
    @media (max-width: 400px) {
      #building {
        width: 100%;
      }
      #caption {
        display: none;
      }
    }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)