DEV Community

Cover image for Easy and Quick Single DIV Spinning Dots Loading Status Animation using Vanilla CSS Only
Designing Coder
Designing Coder

Posted on • Originally published at designingcoder.hashnode.dev

6 2

Easy and Quick Single DIV Spinning Dots Loading Status Animation using Vanilla CSS Only

If you prefer video over text then there is a YouTube video at the end of the article. Let's go step-by-step and build our loading animation.

Step-1: Setting up theme

Let's first set up the theme and position our animation.

    <div class="loading"></div>
Enter fullscreen mode Exit fullscreen mode
    body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      display: flex;
      background: midnightblue;
      justify-content: center;
      align-items: center;
    }
    .loading {
      width: 1.5em;
      height: 1.5em;
      border-radius: 50%;
        background: white;
    }
Enter fullscreen mode Exit fullscreen mode

The circle you see is for the reference, we will remove it later.

Step-2: Adding the dots

We will use box-shadow which will help us add more circles or dots without adding any extra div. We will position them around our previous circle.

     .loader {
         ...
      box-shadow:
            0 -3em 0rgba(255, 255, 255, 1),
            2.25em -2.25em rgba(255, 255, 255, 0.875),
            3em 0 rgba(255, 255, 255, 0.75),
            2.25em 2.25em rgba(255, 255, 255, 0.625),
            0 3em rgba(255, 255, 255, 0.5),
            -2.25em 2.25em rgba(255, 255, 255, 0.375),
            -3em 0 rgba(255, 255, 255, 0.25),
            -2.25em -2.25em rgba(255, 255, 255, 0.125)
            ;
    }
Enter fullscreen mode Exit fullscreen mode

We no longer need the first circle(background: white;), we can remove it.

Step-3: Animation

We just need to the div to keep rotating as per our need, which is a one-liner coder.

    .loading {
        ...
      animation: spin 1.2s linear infinite;
    }

    @keyframes spin {
      100% { transform: rotate(-360deg) }
    }

Enter fullscreen mode Exit fullscreen mode

We have our single div loading status animation ready. Thank you for reading.

Please feel free to drop you opinion or any helpful tips.

Feel free to connect on Social Media: https://designingcoder.github.io

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (2)

Collapse
 
posandu profile image
Posandu

What's the meaning of vanilla CSS?

Collapse
 
designingcoder profile image
Designing Coder

Vanilla CSS is just plain CSS, it does not refer to any particular CSS library like Bootstrap, Tailwind etc.

AWS GenAI LIVE image

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay