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>
CSS
*{
margin:0;
padding:0;
}
Now center our <div>
body{
background:#444;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
Now style our box
.box{
width:20px;
height:20px;
background: white;
margin:5px;
}
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;
}
Now it's time to animate using keyframes
@keyframes balls{
0%{
transform:sclaeY(1);
}
50%{
transform:scaleY(3);
}
100%{
transform:sclaeY(1);
}
}
I hope you love it.
Support me, If you can
Top comments (2)
Great work sir... I really love this
Thanks for appreciating my work😊