Cara Membuat Efek Loading `beforeunload`

Halo semua ^^
Kembali lagi posting
Sekarang aku akan membagi Tutorial Cara Membuat Efek Loading `beforeunload`
yaitu Efek Loading yang bukan hanya Loading, Tapi terdapat pada Javascript, beforeunload adalah Event yang akan Terpicu saat sebuah Halaman mulai berpindah karena seorang pengguna mengeklik Tautan tertentu ( Hanya memuat ulang halaman dengan cara mengeklik tombol Reload )
Langsung saja ke caranya ya :D

      ~ Login ke Blogger
      ~ Pilih Dashboard >> Template >> Edit HTML
      ~ Letakan Jquery berikut di atas Kode </body>

// Menyisipkan markup tabir animasi
$(document.body).append('
Loading...

');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});

      ~ Lalu, Letakkan CSS Berikut di atas ]]></b:skin>

#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background:yellow url('data:image/gif;base64,R0lGODlhKwALAPEAAP///0tKSqampktKSiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=') no-repeat 50% 50%;
  font:0/0 a;
  text-shadow:none;
  padding:1em 1.2em;
  display:none;
}

      ~ Lalu Klik Simpan

Selesai ^^
Semoga bermanfaat...
Enjoy BLOGGING ^o^