This content originally appeared on DEV Community and was authored by Jon Snow
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
This content originally appeared on DEV Community and was authored by Jon Snow
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
APA
MLA
Jon Snow | Sciencx (2023-05-06T18:50:51+00:00) CSS Box Loading Animation. Retrieved from https://www.scien.cx/2023/05/06/css-box-loading-animation/
" » CSS Box Loading Animation." Jon Snow | Sciencx - Saturday May 6, 2023, https://www.scien.cx/2023/05/06/css-box-loading-animation/
HARVARDJon Snow | Sciencx Saturday May 6, 2023 » CSS Box Loading Animation., viewed ,<https://www.scien.cx/2023/05/06/css-box-loading-animation/>
VANCOUVERJon Snow | Sciencx - » CSS Box Loading Animation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/05/06/css-box-loading-animation/
CHICAGO" » CSS Box Loading Animation." Jon Snow | Sciencx - Accessed . https://www.scien.cx/2023/05/06/css-box-loading-animation/
IEEE" » CSS Box Loading Animation." Jon Snow | Sciencx [Online]. Available: https://www.scien.cx/2023/05/06/css-box-loading-animation/. [Accessed: ]
rf:citation » CSS Box Loading Animation | Jon Snow | Sciencx | https://www.scien.cx/2023/05/06/css-box-loading-animation/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.