Kamis, 18 April 2013

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> 


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...

Catatan Kecil Unknown :

Artikel artikel 1, diproduksi di Indonesia oleh Unknown on Kamis, 18 April 2013. Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk meninggalkan komentar, jejak kaki, dan juga salam tempel. Unknown adalah seorang penggiat blog yang cerdas, cantik, imut, sederhana, dan bersahabat, serta selalu rajin beribadah dan taat kepada kedua orang tua, meskipun Unknown saat ini masih duduk di bangku Taman Kanak-Kanak.

Enter your email address:

Delivered by FeedBurner

OK

11 komentar:

 
scrolltotop