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>
&lt…


This content originally appeared on DEV Community and was authored by Rohit Sharma

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.


This content originally appeared on DEV Community and was authored by Rohit Sharma


Print Share Comment Cite Upload Translate Updates
APA

Rohit Sharma | Sciencx (2021-12-21T11:28:19+00:00) Loading Animation with CSS only. Retrieved from https://www.scien.cx/2021/12/21/loading-animation-with-css-only/

MLA
" » Loading Animation with CSS only." Rohit Sharma | Sciencx - Tuesday December 21, 2021, https://www.scien.cx/2021/12/21/loading-animation-with-css-only/
HARVARD
Rohit Sharma | Sciencx Tuesday December 21, 2021 » Loading Animation with CSS only., viewed ,<https://www.scien.cx/2021/12/21/loading-animation-with-css-only/>
VANCOUVER
Rohit Sharma | Sciencx - » Loading Animation with CSS only. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/21/loading-animation-with-css-only/
CHICAGO
" » Loading Animation with CSS only." Rohit Sharma | Sciencx - Accessed . https://www.scien.cx/2021/12/21/loading-animation-with-css-only/
IEEE
" » Loading Animation with CSS only." Rohit Sharma | Sciencx [Online]. Available: https://www.scien.cx/2021/12/21/loading-animation-with-css-only/. [Accessed: ]
rf:citation
» Loading Animation with CSS only | Rohit Sharma | Sciencx | https://www.scien.cx/2021/12/21/loading-animation-with-css-only/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.