DEV Community

loading...
Cover image for Creating a Loading Status or Building Process Animation using Vanilla CSS

Creating a Loading Status or Building Process Animation using Vanilla CSS

Designing Coder
Designing Coder is about programming and digital art, here you will get articles about useful little code snippets, digital art done through code and much more.
Originally published at designingcoder.hashnode.dev Updated on ・2 min read

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

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

Find me on: YouTube , Facebook , Instagram

Discussion (0)