Hello Everyone, Today we are going to create cool loading animation with CSS only. So, let's get started.
Our final result will look like this
In the end of this post I attached Codepen Pen.
Firstly we have to write some HTML
<body>
<span>L</span>
<span>O</span>
<span>A</span>
<span>D</span>
<span>I</span>
<span>N</span>
<span>G</span>
</body>
We just created 7 <span> and now it's time to write CSS part for this loading animation effect.
First set margin and padding to 0
*{
margin:0;
padding:0;
font-weight:bolder;
}
Now set body display:flex and justify-content:center and align-items:center to center the LOADING word.
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background-color:#333;
}
Now set font-size to a desired value and set margin to create some gap inbetween .
span{
font-size:30px;
margin:5px;
}
Now target the individual letter with nth-child() pseudo selector to animate them. Set animation-delay of each child to some random value. So, there is a difference in their timing.
span:nth-child(1){
color:red;
animation:l 1s linear infinite;
}
span:nth-child(2){
color:blue;
animation:l 1s 0.11s linear infinite;
}
span:nth-child(3){
color:green;
animation:l 1s 0.33s linear infinite;
}
span:nth-child(4){
color:red;
animation:l 1s 0.47s linear infinite;
}
span:nth-child(5){
color:orange;
animation:l 1s 0.24s linear infinite;
}
span:nth-child(6){
color:cyan;
animation:l 1s 0.3s linear infinite;
}
span:nth-child(7){
color:magenta;
animation:l 1s 0.19s linear infinite;
}
Create a keyframe to animate them.
@keyframes l{
0%{
transform:translateY(-14px)
}
50%{
transform:rotateY(90deg);
}
100%{
transform:translateY(-14px);
}
}
If we change transform with respect to Y axis to X-axis the final result will look like this.
Codepen:
I hope you love this post.
Support me if you can.
Top comments (0)