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

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

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😊

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

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

Okay