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😊