Membuat Efek Animasi Loading Sederhana dengan JQuery - Bagian 1

Masalah yang biasanya sulit dipecahkan adalah tentang cara menyeleksi elemen berupa link internal. Sampai beberapa saat yang lalu Saya menemukan ini.

Berikut ini adalah langkah singkat untuk membuatnya:

Salin kode CSS ini, letakkan di atas kode ]]></b:skin> atau </style>:

#page-loader {
  position:fixed;
  top:0;
  left:0;
  background-color:#fff;
  z-index:9999;
  text-align:center;
  width:100%;
  height:100%;
  padding-top:70px;
  font:bold 50px Calibri,Arial,Sans-Serif;
  color:#000;
  display:none;
}

Kemudian tambahkan kode ini di atas </body>:

<div id='page-loader'>Loading...</div>

Setelah itu buat fungsi JQuery sederhana dengan bantuan script untuk menemukan link internal:

$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#page-loader').fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#page-loader').click(function() {
        $(this).hide();
    });
});

Letakkan script tersebut di atas kode </head>

Klik simpan dan coba muat ulang halaman blogmu, kemudian coba klik salah satu link internal di dalam blogmu dan lihat apa yang akan terjadi...

Lihat Demo

Tambahan:

Jika Anda pemakai JQuery versi di bawah 1.4.0, Anda harus menambahkan plugin delay sebelum menjalankan fungsi .delay() karena fungsi .delay() pada JQuery hanya terdapat pada JQuery versi 1.4 dan di atasnya:

Plugin Delay untuk JQuery versi 1.4-

$.fn.delay = function(time, callback) {
    // Empty function:
    jQuery.fx.step.delay = function(){};
    // Return meaningless animation, (will be added to queue)
    return this.animate({delay:1}, time, callback);
}