DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Create Loading Animation with CSS only

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

Discussion (2)

Collapse
mhumbleson profile image
Michael Omale

Great work sir... I really love this

Collapse
devrohit0 profile image
Rohit Sharma Author

Thanks for appreciating my work😊