DEV Community

Rohit Sharma
Rohit Sharma

Posted on

4 1

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

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😊

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

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

Okay