Creating a Simple Head-Tail Loading Spinner using Vanilla CSS

If you want to skip reading then you can watch YouTube video on it. The link is at the end of the article.

Step 1: Adding a class spinner

In index.html we add class spinner by:

    <div class = "spinner"></div>

In index.css we define the class spinner:

    body{
       bodybackground: #050115;
}
    .spinner {
        width : 10em;
        height: 10em;
        border-top : 1em solid #d5fff7;
        border-right: 1em solid transparent;
        border-radius: 50%;
    }

This creates a tail like structure of our spinner. The next thing will be adding a head to it.

Step 2: Adding a head

We add a class head inside the div of the spinner's div.

    <div class = "spinner">
        <div class = "head"></div>
    </div>

Now, we need to define and position the head to the required place:

    .head {
        width: 1em;
        height: 1em;
        background-color: #d5fff7;
        border-radius: 50%;
        margin-left: 8.5em;
        margin-top: 0.5em;
    }

The spinner looks good and has the attention of the user when it's in the middle of the page.

Step 3: Positioning the spinner

We already have the class spinner, we add margin: auto inside it to position it to the center of the page

    .spinner {
        ...
        margin: auto
    }

The spinner is just horizontally centred to the page because the height of the body is not full-screen. Let's fix that now:

    body {
        background: #050115;
        display: flex;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
      }

Let's add motion to our work.

Step 4: Adding animation

In the class spinner we use animation and define the animation properties:

    .spinner {
        ...
        animation: spinner 0.6s linear infinite;
    }

In the property of animation, spinner is the animation-name, we can use the other name as well. 0.6s is the animaion-duration in which our animation will go from 0% to 100%, linear is the animation-timing-function which makes it look smooth and infinite if animation-iteration-count.

Now we make the animation behave:

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

Voilà! We have our spinner live.

Step 5: Changing the size of the spinner

Here till now I have used em instead of px, so that we can control the size of the spinner from a single place instead of making the changes at various places.

To change the size of the spinner, we add a inline style for font-size and change its value as shown:

    <div class = "spinner" style = "font-size: 10px">
        <div class = "head"></div>
    </div>

Default value of 1em is 16px usually. So, changing the font-size here changes the value of 1em thereby changing the size of the spinner.

Social Media Links: designingcoder.github.io