Displaying a Preloader on your webpage

Add a div just after tag.

<div class="se-pre-con">

Add some CSS to show the icon and bring it in the middle of the page.

/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url(images/loader-64x/Preloader_2.gif) center no-repeat #fff;
}

Note: You can update image path according to your requirement in above code. Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js">

paste this code under the head tag or in a separate js file.

 // Wait for window load
 $(window).load(function() {
  // Animate loader off screen
  $(".se-pre-con").fadeOut("slow");;
 });

That’s All. Now reload your page and it will show a loading icon.