CSS Loading Boxes Animation

Have seen that they’re a huge number of Javascript (jQuery) based loading animation for dynamic content out there, the CSS technology can do the same thing with much performance and less coding. In this post, I would like to share how to create CSS loading animation. Work a little with the CSS, there are several ways to customize your animation. If you want to change the rotating speed, for example, reduce the animation duration.

loading_model_10.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading_model_10</title>
<style>
body{
 background-color: #7d1ad4;
}
.sa-box-grid{
 width: 40px;
 height: 40px;
 margin: 300px auto;
}
.sa-box-grid .sa-box{
 width: 33%;
 height: 33%;
 background-color:#FFF;
 float:left;
 -webkit-animation: sa-boxGridScaleDelay 1.3s infinite ease-in-out;
 animation: sa-boxGridScaleDelay 1.3s infinite ease-in-out;
}
.sa-box-grid .sa-box_1{
 -webkit-animation-delay: 0.2s;
 animation-delay: 0.2s;
}
.sa-box-grid .sa-box_2{
 -webkit-animation-delay: 0.3s;
 animation-delay: 0.3s;
}
.sa-box-grid .sa-box_3{
 -webkit-animation-delay: 0.4s;
 animation-delay: 0.4s;
}
.sa-box-grid .sa-box_4{
 -webkit-animation-delay: 0.1s;
 animation-delay: 0.1s;
}
.sa-box-grid .sa-box_5{
 -webkit-animation-delay: 0.2s;
 animation-delay: 0.2s;
}
.sa-box-grid .sa-box_6{
 -webkit-animation-delay: 0.3s;
 animation-delay: 0.3s;
}
.sa-box-grid .sa-box_7{
 -webkit-animation-delay: 0s;
 animation-delay: 0s;
}
.sa-box-grid .sa-box_8{
 -webkit-animation-delay: 0.1s;
 animation-delay: 0.1s;
}
.sa-box-grid .sa-box_9{
 -webkit-animation-delay: 0.2s;
 animation-delay: 0.2s;
}
@keyframes sa-boxGridScaleDelay{
 0%, 70%, 100%{
 -webkit-transform: scale3D(1, 1, 1);
 transform: scale3D(1, 1, 1);
 }
 35%{
 -webkit-transform:scale3D(0, 0, 1);
 transform:scale3D(0, 0, 1);
 }
}
@-webkit-keyframes sa-boxGridScaleDelay{
 0%, 70%, 100%{
 -webkit-transform:scale3D(1, 1, 1);
 transform:scale3D(1, 1, 1);
 }
 35%{
 -webkit-transform: scale3D(0, 0, 1);
 transform: scale3D(0, 0, 1);
 }
}
</style>
</head>
<body>
<div class="sa-box-grid">
 <div class="sa-box sa-box-1"></div>
 <div class="sa-box sa-box-2"></div>
 <div class="sa-box sa-box-3"></div>
 <div class="sa-box sa-box-4"></div>
 <div class="sa-box sa-box-5"></div>
 <div class="sa-box sa-box-6"></div>
 <div class="sa-box sa-box-7"></div>
 <div class="sa-box sa-box-8"></div>
 <div class="sa-box sa-box-9"></div>
</div>
</body>
</html>

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply