DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Loading Animation with CSS only

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

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

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

Now set font-size to a desired value and set margin to create some gap inbetween .

span{
  font-size:30px;
  margin:5px;
}
Enter fullscreen mode Exit fullscreen mode

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

Create a keyframe to animate them.

@keyframes l{
  0%{
    transform:translateY(-14px)
  }
  50%{

    transform:rotateY(90deg);
  }
  100%{
    transform:translateY(-14px);
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)