CSS Box Loading Animation
HTML Code
<div class="loader">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
CSS Code
.loader {
width: 112px;
height: 112px;
}
.box1,
.box2,
.box3 {
border: 16px solid #f5f5f5;
box-sizing: border-box;
position: absolute;
display: block;
}
.box1 {
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
animation: abox1 4s 1s forwards ease-in-out infinite;
}
/* Visit https://democoding.in/ for more free css animation */
.box2 {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
animation: abox2 4s 1s forwards ease-in-out infinite;
}
.box3 {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
animation: abox3 4s 1s forwards ease-in-out infinite;
}
@keyframes abox1 {
0% {
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
12.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
25% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
37.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
50% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
62.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
75% {
width: 48px;
height: 112px;
margin-top: 0px;
margin-left: 0px;
}
87.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
100% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
}
@keyframes abox2 {
0% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
12.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
25% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
37.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
50% {
width: 112px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
62.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
75% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
87.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
100% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
}
@keyframes abox3 {
0% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
12.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
25% {
width: 48px;
height: 112px;
margin-top: 0px;
margin-left: 64px;
}
37.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
50% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
62.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
75% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
87.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
100% {
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
}
Thanks for Reading ❤️! Check my website Demo coding for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!
Don't forget to subscribe our channel : Demo code
Top comments (0)