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 :

DEMO 1

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'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNb2czNNjquuFs0uklFL0ol6tLXNMgpN6_-wmjN7ZCntdxafkp_2I6h7G9ds0Ya55HZOIXnE-3ZxG8Csg4z1u3oyfZ3rCcEMbjGyWda5J-lCsaZLaEAAfdCrAULAsO92cIyr9MoKFtOjGj/s1600/puter2.gif'></img></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 :

DEMO 2

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