Hey Everyone, 

Web design these days is getting more attention due to new design trends and continuous innovation in web design people now demand a more responsive web site with better user experience. Web Designers are using different techniques to make their website more catchy and user friendly and one of them is using preloaders.

I have also noticed that now many websites uses a loading page where a spinner or a loader is showed while third-party libraries, your javascript / JQuery files and other resources loads properly which is a very good technique according to Usability and UI/UX Experience that your user is notified about your website which is loading some content prior showing a complete view.

So that’s very simple if you know CSS, if not then let me tell you how we can do that:

  1. Add a div just after <body> tag.
    <div class="se-pre-con"></div>
  2. 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.

  3. Now add some jQuery to show the pre-loading icon when the page is loading and hide when it has finished loading.
    <script src=""></script>
    <script src=""></script>
    //paste this code under the head tag or in a separate js file.
    	// Wait for window load
    	$(window).load(function() {
    		// Animate loader off screen

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