Membuat Efek Loading Animasi Beforeunload Untuk Blog

HAlloo...!!

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;

}

Copy Kode

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>

Copy Kode

Bagaimana???
Berhasil menerapkannya???

Sumber : http://aiizahh.blogspot.com/2013/04/membuat-efek-loading-animasi.html#ixzz3ly4e49IF