DEV Community

loading...
Cover image for Creating a simple Head-Tail Spinner using Vanilla CSS

Creating a simple Head-Tail Spinner using Vanilla CSS

Designing Coder
Designing Coder is about programming and digital art, here you will get articles about useful little code snippets, digital art done through code and much more.
Originally published at designingcoder.hashnode.dev Updated on ・2 min read

In this article we will go through step by step to create a simple and regular Head-Tail spinner using Vanilla CSS.

Step 1: Adding a class spinner

In index.html we add class spinner by:

    <div class = "spinner"></div>
Enter fullscreen mode Exit fullscreen mode

In index.css we define the class spinner:

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

This creates a tail like structure of our spinner. The next thing will be add 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>
Enter fullscreen mode Exit fullscreen mode

Now, we need to define and postion 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;
    }
Enter fullscreen mode Exit fullscreen mode

The spinner looks good and has the attention of the user when it's in the miiddle 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
    }
Enter fullscreen mode Exit fullscreen mode

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;
      }
Enter fullscreen mode Exit fullscreen mode

Let's add motion to our work.

Step 4: Adding animation

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

    .spinner {
        ...
        animation: spinner 0.6s linear infinite;
    }
Enter fullscreen mode Exit fullscreen mode

In the property animation, spinner is the animation-name, we can use 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 animatoin behave:

    @keyframes spinner {
        100% { transform: rotate(360deg) }
    }
Enter fullscreen mode Exit fullscreen mode

Voila! 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 it's value as shown:

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

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.

Find it on YouTube
Find it on CodePen

Discussion (0)