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

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

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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay