April 19, 2013

Membuat Efek Loading Animasi Beforeunload Untuk Blog



Selamat pagi...

Kali ini saya membuat sebuah tutorial bagaimana sebuah efek loading animasi dapat dibuat untuk blog. Untuk efek dasarnya sendiri saya pelajari dari tutorialnya Mas Taufik sedangkan tampilannya, mari kita berkreasi...!!!

Bagaimana membuat efek loading sederhana saat kita membuka tautan-tautan internal sehingga visualisasi blog menjadi lebih menarik???

Yang kita perlukan hanya kode CSS dan Javascript, dan jadilah sebuah efek loading animasi sederhana yang akan terpicu saat kita membuka tautan-tautan internal.

Coba letakkan kode berikut diatas kode ]]></b:skin> :

#aiizahh-loader {

position:fixed !important;

position:absolute;

top:0;

right:0;

bottom:0;

left:0;

z-index:9999;

background-color:#D580FE;

color:black;

padding:1em 1.2em;

display:none;

}



Selanjutnya cari kode </body> dan letakkan kode berikut diatasnya :

<script type='text/javascript'>

//<![CDATA[

$(document.body).append('<div id="aiizahh-loader">Redirecting...</div>');

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

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

});

//]]>

</script>



Bagaimana???
Berhasil menerapkannya??? Coba lihat DEMO dibawah ini :



Kenapa saya katakan efek loading animasi sederhana???

Ya, karena efek loading yang timbul hanya berupa sebuah halaman dengan background warna dan diisi dengan tulisan "Redirecting" sedangkan banyak yang menginginkan ditambah dengan berbagai macam gambar maupun animasi.

Sebetulnya jika ingin menambahkan sebuah gambar tentu saja bisa. Coba cek demo berikut :


Bagaimana caranya??? Coba ubah Javascript diatas dengan menghapus kode berikut :

.append('<div id="aiizahh-loader">Redirecting...</div>')

Lalu dibawah </script> tambahkan kode berikut :

<div id='aiizahh-loader'>&lt;img src=&#039;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNb2czNNjquuFs0uklFL0ol6tLXNMgpN6_-wmjN7ZCntdxafkp_2I6h7G9ds0Ya55HZOIXnE-3ZxG8Csg4z1u3oyfZ3rCcEMbjGyWda5J-lCsaZLaEAAfdCrAULAsO92cIyr9MoKFtOjGj/s1600/puter2.gif&#039;&gt;&lt;/img&gt;</div>

Sampai disini bagaimana hasil kreasi temen-temen???
Sudah sesuai kah atau belum???

Lalu, bagaimana bila visualnya bukan berupa gambar, melainkan sebuah animasi progress yang dibangun dengan menggunakan kode CSS??? Menurut saya, inilah yang paling menarik...

Coba cek lagi postingan saya mengenai Loading Animasi Dengan CSS3 Part 1 dan kita akan berkreasi dengan animasi progress tersebut.

Hasil dari kombinasi efek dan progress nya akan terlihat pada demo dibawah ini :


Bagaimana menurut tement-temen???
Tertarik menerapkannya??? Coba kita kembali pada kode CSS dasar dari efek ini diatas, setelah diletakkan pada template kemudian tambahkan kode CSS ini dibawahnya :

.barload{text-align:center;}

.barload span {

display:inline-block;

top:0;

background-color:#DB23D5;

width:12px;

height:12px;

-moz-animation-name:bounce_barload;

-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_barload;

-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_barload;

-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_barload;

-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_barload;

animation-duration:1.7s;

animation-iteration-count:infinite;

animation-direction:linear;

transform:scale(.3);

border-radius:8px;

}

.barload span:nth-child(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;

}

.barload span:nth-child(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;

}

.barload span:nth-child(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;

}

.barload span:nth-child(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;

}

.barload span:nth-child(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;

}

.barload span:nth-child(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;

}

.barload span:nth-child(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;

}

.barload span:nth-child(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_barload{

0%{

-moz-transform:scale(1);

background-color:#DB23D5;

}

100%{

-moz-transform:scale(.3);

background-color:#FFFFFF;

}

}

@-webkit-keyframes bounce_barload{

0%{

-webkit-transform:scale(1);

background-color:#DB23D5;

}

100%{

-webkit-transform:scale(.3);

background-color:#FFFFFF;

}

}

@-ms-keyframes bounce_barload{

0%{

-ms-transform:scale(1);

background-color:#DB23D5;

}

100%{

-ms-transform:scale(.3);

background-color:#FFFFFF;

}

}

@-o-keyframes bounce_barload{

0%{

-o-transform:scale(1);

background-color:#DB23D5;

}

100%{

-o-transform:scale(.3);

background-color:#FFFFFF;

}

}

@keyframes bounce_barload{

0%{

transform:scale(1);

background-color:#DB23D5;

}

100%{

transform:scale(.3);

background-color:#FFFFFF;

}

}


Jika sudah, maka seperti halnya saat kita menambah gambar pada efek loading nya, maka Javascript yang sudah diubah tersebutlah yang akan kita gunakan, lalu ditambah dengan kode berikut dibawahnya :

<div id='aiizahh-loader'>
<div class="barload">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
  </div>

Nah, sekarang bagaimana hasil kreasi nya???
Untuk variasi CSS progress bar yang lain mungkin akan saya share pada artikel-artikel part berikutnya...

Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar yah...

21 comments

  1. NIce tutor mis, mantap nih loafing nya cantik, thank dahn berbagi, followback sukses mis, thank

    ReplyDelete
    Replies
    1. terima kasih banyak sob, padahal sering saling berkunjung tp malah belum saling follow, hehehe... ^_^

      Delete
  2. wah keren mba blognya, mancaapp
    follback sukses

    ReplyDelete
  3. yg pake html aja gimna .. biar gak usah bnyk edit soalnya hahaha.. mau yg praktis maklum newbie nih kak :D

    kmren yg aku pake gak mempan .

    ReplyDelete
    Replies
    1. hehe, pake css+javascript baru bisa terpicu efeknya, ^_^ nah kode css loading bar yg kemaren udah aku kombinasiin dengan efek loading halamannya coba tes demo 2... \o/

      Delete
  4. demo yang kedua keren banget...animasinya titik titik kecil mirip loading game :-)

    ReplyDelete
  5. Tutorialnya sangat berguna sekali sobat
    dapat menambah pengetahuan buat saya
    terima kasih sudah berbagi

    ReplyDelete
  6. mantab sobat tutornya keren dan cantik :)

    ReplyDelete
  7. bagus sih tapi biukin loading berat gak di blog.? :-bd

    ReplyDelete
    Replies
    1. ga juga sih gan...
      kalo mau coba aja cek dulu berat blog nya sebelum dan sesudah menggunakan efek ini...http://aiizahh.blogspot.com/p/blog-page_3166.html

      Delete
  8. mantap zob tutorilanya!
    pengen nyoba a

    ReplyDelete
  9. wah ini yang model mba itu yah? kerenn, tapi saya mungkin cobanya lainkali deh, heheh ada yang harus difokusin dulu, keep spirirt bloggingnya mba

    ReplyDelete
    Replies
    1. iya bener...
      :-bd :-bd semangat juga untuk puisi nya mba... ^_^

      Delete