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 full post →

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😊

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series