Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 14, 2021 05:45 am GMT

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


Original Link: https://dev.to/designingcoder/easy-and-quick-single-div-spinning-dots-loading-status-animation-using-vanilla-css-only-chj

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To