Loading Animasi dengan CSS3 Part 1

Bagaimana membuat efek loading animasi seperti gambar diatas???

Kali ini saya akan memberikan kode HTML dan tentu saja CSS nya dimana kode-kode ini yang nantinya akan membangun efek loading animasi ini.

Untuk aplikasi nya pada blog mungkin temen-temen bisa lakukan sendiri karena pada postingan ini murni hanya kode-kode untuk membuat efek loading animasi tersebut.

#aii-loader{
position:relative;
width:99px;
height:12px}

.aii-loader{
position:absolute;
top:0;
background-color:#DB23D5;
width:12px;
height:12px;
-moz-animation-name:bounce_aii-loader;
-moz-animation-duration:1.7s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-moz-border-radius:8px;
-webkit-animation-name:bounce_aii-loader;
-webkit-animation-duration:1.7s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-webkit-border-radius:8px;
-ms-animation-name:bounce_aii-loader;
-ms-animation-duration:1.7s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-ms-border-radius:8px;
-o-animation-name:bounce_aii-loader;
-o-animation-duration:1.7s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
-o-border-radius:8px;
animation-name:bounce_aii-loader;
animation-duration:1.7s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
border-radius:8px;
}

#aii-loader_1{
left:0;
-moz-animation-delay:0.68s;
-webkit-animation-delay:0.68s;
-ms-animation-delay:0.68s;
-o-animation-delay:0.68s;
animation-delay:0.68s;
}

#aii-loader_2{
left:12px;
-moz-animation-delay:0.85s;
-webkit-animation-delay:0.85s;
-ms-animation-delay:0.85s;
-o-animation-delay:0.85s;
animation-delay:0.85s;
}

#aii-loader_3{
left:25px;
-moz-animation-delay:1.02s;
-webkit-animation-delay:1.02s;
-ms-animation-delay:1.02s;
-o-animation-delay:1.02s;
animation-delay:1.02s;
}

#aii-loader_4{
left:37px;
-moz-animation-delay:1.19s;
-webkit-animation-delay:1.19s;
-ms-animation-delay:1.19s;
-o-animation-delay:1.19s;
animation-delay:1.19s;
}

#aii-loader_5{
left:50px;
-moz-animation-delay:1.36s;
-webkit-animation-delay:1.36s;
-ms-animation-delay:1.36s;
-o-animation-delay:1.36s;
animation-delay:1.36s;
}

#aii-loader_6{
left:62px;
-moz-animation-delay:1.53s;
-webkit-animation-delay:1.53s;
-ms-animation-delay:1.53s;
-o-animation-delay:1.53s;
animation-delay:1.53s;

#aii-loader_7{
left:74px;
-moz-animation-delay:1.7s;
-webkit-animation-delay:1.7s;
-ms-animation-delay:1.7s;
-o-animation-delay:1.7s;
animation-delay:1.7s;
}

#aii-loader_8{
left:87px;
-moz-animation-delay:1.87s;
-webkit-animation-delay:1.87s;
-ms-animation-delay:1.87s;
-o-animation-delay:1.87s;
animation-delay:1.87s;
}
@-moz-keyframes bounce_aii-loader{
0%{
-moz-transform:scale(1);
background-color:#DB23D5;
}
100%{
-moz-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-webkit-keyframes bounce_aii-loader{
0%{
-webkit-transform:scale(1);
background-color:#DB23D5;
}
100%{
-webkit-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-ms-keyframes bounce_aii-loader{
0%{
-ms-transform:scale(1);
background-color:#DB23D5;
}
100%{
-ms-transform:scale(.3);
background-color:#FFFFFF;
}
}
@-o-keyframes bounce_aii-loader{
0%{
-o-transform:scale(1);
background-color:#DB23D5;
}
100%{
-o-transform:scale(.3);
background-color:#FFFFFF;
}
}
@keyframes bounce_aii-loader{
0%{
transform:scale(1);
background-color:#DB23D5;
}
100%{
transform:scale(.3);
background-color:#FFFFFF;
}
}

<div id="aii-loader">
<div id="aii-loader_1" class="aii-loader">
</div>
<div id="aii-loader_2" class="aii-loader">
</div>
<div id="aii-loader_3" class="aii-loader">
</div>
<div id="aii-loader_4" class="aii-loader">
</div>
<div id="aii-loader_5" class="aii-loader">
</div>
<div id="aii-loader_6" class="aii-loader">
</div>
<div id="aii-loader_7" class="aii-loader">
</div>
<div id="aii-loader_8" class="aii-loader">
</div>
</div> 

DEMO :

Hmm... mungkin temen-temen bingung kenapa saya membuat judul seperti itu (Part 1) ???

Next, saya akan share lagi efek loading animasi yang lain yang mungkin lebih menarik untuk temen-temen gunakan...

Terima kasih, semoga bermanfaat...