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 Alya Zahra :

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

Enter your email address:

Delivered by FeedBurner

OK

11 komentar:

  1. tired
    support
    spoiled
    smoke
    slap
    shake
    order
    dontcare
    greedy
    depressed
    deff
    dad

    BalasHapus
  2. cheer angry2 wind huhhh cry4 angry1 drunk wat2 peace2

    BalasHapus
  3. Kalau nggak ngerti html pusing juga ya gan omg

    BalasHapus
  4. wah cantik ekali blog ta cewek ,numpancopas yah
    jhamalsinjai.blogspot.com

    BalasHapus

 
scrolltotop