Show loading before every page load using javascript

In this artical we learn how we can loading bar before every page load with javascript.

<div class="preloader"> </div>

<style>

.preloader {

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

z-index: 9999;

// add loading gif image path here and size belown 

background: url("loading.gif") center no-repeat #fff;  

background-size: 200px 200px;

background-color: rgba(255,255,255,0.9);

}

</style>

<script> 

$(window).load(function () {

$(".preloader").fadeOut("slow"); 

})

</script>