Creating a simple Head-Tail Spinner using Vanilla CSS

In this article we will go through step by step to create a simple and regular Head-Tail 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 { background: #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 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> 

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

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 } 

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 proprties:

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

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

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> 

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: https://designingcoder.github.io