artikel 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_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>