Animasi loading dengan jquery sebelum halaman dimuat

Saat link internal pada blog di klik maka akan ditampilkan gambar animasi seperti di atas dan akan menghilang saat seluruh halaman selesai di load. Bagaimana membuatnya?

Script ini hanya sebagai catatan pribadi, sengaja saya posting di sini agar tidak perlu mencari kemana-mana saat saya membutuhkannya :D

Pemasangan untuk blogger letakkan kode css berikut di atas ]]></b:skin> atau </style>

#page-loader {
  position:fixed;
  top:0;
  left:0;
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwN9WTFCVlMAGLejZmqgo3jjkI-xshDvyb3oINKeYi-viMSDwOl8oLZ-jX1tvNzKN9oMYTJNZGp0oNqcYJUKpQUSJkghnej0LB3-3rpzYks6DVnek4_aToOZKOk4IUy4DzptBicSEc1I/s1600/loading40.gif')no-repeat center center #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;
}

Kode HTML letakkan sebelum </body>

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

Jquery letakkan sebelum </head>

$(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();
    });
});

Sumber: Efek Animasi Loading Sederhana dengan JQuery