Membuat Efek Animasi Loading Sederhana

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