April 20, 2013

Loading Animasi Dengan CSS3 Part 2 : Moving Ball vs Duocolour Animation



Ok, seperti janji saya sebelumnya untuk membuatkan postingan mengenai cara membuat loading animasi dengan CSS3 untuk menyambung "Loading Animasi Dengan CSS3 Part 1" maka kali ini tampilan loading animasi nya cukup berbeda meskipun dengan kombinasi warna utama yang sama seperti postingan sebelumnya.

Dan, pada postingan ini, saya akan share dua buah animasi loading yang berbeda, pertama adalah moving ball loader dan yang kedua adalah duocolour loader. Makanya judulnya pun terkesan gimana gitu pake vs-an segala...hehehe.....

Ok, langsung aja :

1. Moving ball loader.

DEMO :



.aiizahhmovingball{
position:relative;
width:128px;
height:10px;
}

.aiizahhmovingball-line span {
position:absolute;
left:0px;
top:4px;
height:2px;
width:128px;
background-color:#000000;
}

.aiizahhmovingball span {
background-color:#DB23D5;
position:absolute;
top:0;
left:0;
width:10px;
height:10px;
-moz-border-radius:5px;
-moz-animation-name:bounce_aiizahhmovingball;
-moz-animation-duration:2.9s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:5px;
-webkit-animation-name:bounce_aiizahhmovingball;
-webkit-animation-duration:2.9s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:5px;
-ms-animation-name:bounce_aiizahhmovingball;
-ms-animation-duration:2.9s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:5px;
-o-animation-name:bounce_aiizahhmovingball;
-o-animation-duration:2.9s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:5px;
animation-name:bounce_aiizahhmovingball;
animation-duration:2.9s;
animation-iteration-count:infinite;
animation-direction:linear;
}

@-moz-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-webkit-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-ms-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@-o-keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}

@keyframes bounce_aiizahhmovingball{
0%{
left:0px;
}

50%{
left:118px;
}

100%{
left:0px;
}

}


<div class="aiizahhmovingball">
<span></span>
<span></span>
</div>


2. Duocolour loader.



.aiizahh-duocolourloader {text-align:center;}

.aiizahh-duocolourloader span {
display:inline-block;
background-color:#FF05FF;
top:0;
left:0;
width:10px;
height:10px;
-moz-border-radius:5px;
-moz-animation-name:bounce_aiizahh-duocolourloader;
-moz-animation-duration:1.5s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:5px;
-webkit-animation-name:bounce_aiizahh-duocolourloader;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:5px;
-ms-animation-name:bounce_aiizahh-duocolourloader;
-ms-animation-duration:1.5s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:5px;
-o-animation-name:bounce_aiizahh-duocolourloader;
-o-animation-duration:1.5s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:5px;
animation-name:bounce_aiizahh-duocolourloader;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-direction:linear;
}

.aiizahh-duocolourloader span:nth-child(1) {
-moz-animation-delay:0s;
-webkit-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;
}

.aiizahh-duocolourloader span:nth-child(2) {
-moz-animation-delay:0.15s;
-webkit-animation-delay:0.15s;
-ms-animation-delay:0.15s;
-o-animation-delay:0.15s;
animation-delay:0.15s;
}

.aiizahh-duocolourloader span:nth-child(3) {
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}

.aiizahh-duocolourloader span:nth-child(4) {
-moz-animation-delay:0.45s;
-webkit-animation-delay:0.45s;
-ms-animation-delay:0.45s;
-o-animation-delay:0.45s;
animation-delay:0.45s;
}


@-moz-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-webkit-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-ms-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@-o-keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}

@keyframes bounce_aiizahh-duocolourloader{
0%{
left:0px;
background-color:#FF05FF;
}

50%{
left:118px;
background-color:#15FF00;
}

100%{
left:0px;
background-color:#FF05FF;
}

}


<div class="aiizahh-duocolourloader">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Bagaimana???
Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar....
Baca juga :
1. Membuat efek loading animasi beforeunload untuk blog.
2. Loading animasi dengan CSS3 Part 1.

14 comments

  1. Wah keren neh kapan² boleh dicoba ya...

    ReplyDelete
  2. Replies
    1. hmm... ^_^ coba lihat postingan ini : http://aiizahh.blogspot.com/2013/04/membuat-efek-loading-animasi.html ikutin aja tutorial nya masukin css : #aiizahh-loader {

      position:fixed !important;

      ............
      ............

      lalu tambahkan css loadernya dibawahnya, misal loader yg no.2 pada postingan ini, kemudian taruh javascriptnya : <script type='text/javascript'>

      //<![CDATA[

      $(document.body);

      $(window).on("beforeunload", function() {

      $('#aiizahh-loader').fadeIn(1000).delay(7000).fadeOut(1000);

      });

      //]]>

      </script>

      dan finishing nya dengan kode html yg sudah dibungkus : <div id="aiizahh-loader">
      <div class="aiizahh-duocolourloader">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      </div>
      </div>


      semoga membantu...

      Delete
  3. CSS itu buat platform wordpress ya? lumayan panjang juga script-nya :-bd

    ReplyDelete
  4. wah sudah suhu nih mangkanya gua kena sindiran
    hehehehe :D
    matur nuhun suhu :-bd
    http://87-connection.blogspot.com

    ReplyDelete
  5. nyimak ya sob,sambil dipelajari.
    makasih ilmunya....:)

    ReplyDelete
  6. Lapor, follback dari http://blog-sadid.blogspot.com telah sukses
    thanks

    ReplyDelete
  7. Kapan ya saya bisa bikin blog tutorial kayak gini..
    Ndak ahli dibidang beginian.. hukz

    ReplyDelete
    Replies
    1. saya juga ga ahli mba, cuma coba-coba aja bikin blog begini... ;)

      Delete