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>

    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;
    }

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)
            ;
    }

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) }
    }

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

Comments

[Posandu]

What's the meaning of vanilla CSS?

[Designing Coder]

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