Display a loading bar before the entire page is loaded

Question

I would like to display a loading bar before the entire page is loaded. For now, I\'m just using a small delay:

$(document).ready(function(){
    $(\'#page\')         


        

Answer 1

Whenever you try to load any data in this window this gif will load.

HTML

Make a Div

CSS .

.loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('https://lkp.dispendik.surabaya.go.id/assets/loading.gif') 50% 50% no-repeat rgb(249,249,249);

jQuery

$(window).load(function() {
        $(".loader").fadeOut("slow");
});