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
Top comments (0)