DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Create Loading Animation with CSS only

#webdev #beginners #css #tutorial

Hello! Everyone, Today we are going to create Beat Bar type loading animation with css only.

Check What we going to create

HTML

We have to create four <div> element.

<body>
  <div class="box" id="box1"></div>
  <div class="box" id="box2"></div>
  <div class="box" id="box3"></div>
  <div class="box" id="box4"></div>
</body>
Enter fullscreen mode Exit fullscreen mode

CSS 

*{
  margin:0;
  padding:0; 
}
Enter fullscreen mode Exit fullscreen mode

Now center our <div>

body{
  background:#444;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
Enter fullscreen mode Exit fullscreen mode

Now style our box

.box{
  width:20px;
  height:20px;
  background: white;
  margin:5px;
}
Enter fullscreen mode Exit fullscreen mode

Now we're going to use nth-child() pseudo selector.

.box:nth-child(1){
  background:red;
  animation: balls 1s linear infinite;
}
.box:nth-child(2){
  background:cyan;
  animation: balls 1s  0.1s linear infinite;
}
.box:nth-child(3){
  background:blue;
  animation: balls 1s 0.2s linear infinite;
}
.box:nth-child(4){
  background:yellow;
  animation: balls 1s 0.4s linear infinite;
}
Enter fullscreen mode Exit fullscreen mode

Now it's time to animate using keyframes

@keyframes balls{
  0%{
    transform:sclaeY(1);
  }
  50%{
    transform:scaleY(3);
  }
  100%{
    transform:sclaeY(1);
  }
}
Enter fullscreen mode Exit fullscreen mode

I hope you love it.
Support me, If you can

Top comments (2)

Collapse
 
mhumbleson profile image
Michael Omale •

Great work sir... I really love this

Collapse
 
devrohit0 profile image
Rohit Sharma •

Thanks for appreciating my work😊

Read next

prast profile image

Launching a website offline without the Internet using Service Worker (English version)

Ramzan -

borysshulyak profile image

Basic Testing Conventions on my prjects

Boris Shulyak -

krowemoh profile image

Running VLC in the Browser

Nivethan -

prasetyomuhdwi profile image

Setup path aliases in React + Vite + TS Project 🤓

Muhammad_Dwi_Prasetyo -