April 17, 2013

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

7 comments

  1. Keren tutorialnya....
    loading blog ini pake trik inikah ???

    sudah saya folback ya :D

    ReplyDelete
    Replies
    1. bukan sob, kalo postingan ini hanya membuat loading bar saja... ^_^

      Delete
  2. mantap tutorialnya
    btw blog mbak udah saya follow back
    :)

    ReplyDelete
  3. akku praktekan kok gak jadi ya kak.

    ReplyDelete
    Replies
    1. ^_^ ini memang kode dasar saja untuk membangun efek seperti itu, sedangkan untuk implementasi untuk sebagai loading halaman harus di modifikasi lagi...
      kalo mau membuat efek loading untuk blog coba cek http://aiizahh.blogspot.com/2013/02/cara-menambahkan-emoticon-dalam.html?showComment=1366248904038#c7659441368083145910
      tutorialnya akan saya buatkan next untuk membuat tampilan css nya... :-bd

      Delete
  4. siang mbak, kunjungan pertama saya.... mau tanya nih, kl misal saya tambahkan kode css yang panjang itu apa nantinya akan berat ke blognya?
    Hm, tapi sekarang saya akan coba praktekan terlebih dahulu
    makasih mbak :)

    ReplyDelete