DEV Community

Rohit Sharma
Rohit Sharma

Posted on

14 2

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay