preloader_1_Bilalamjad.net preloader_2_Bilalamjad.net preloader_3_Bilalamjad.net preloader_4_Bilalamjad.net preloader_5_Bilalamjad.net preloader_6_Bilalamjad.net preloader_7_Bilalamjad.net preloader_8_Bilalamjad.net preloader_9_Bilalamjad.net preloader_10_Bilalamjad.net preloader_11_Bilalamjad.net preloader_21_Bilalamjad.net preloader_31_Bilalamjad.net preloader_41_Bilalamjad.net preloader_51_Bilalamjad.net preloader_61_Bilalamjad.net preloader_71_Bilalamjad.net

 

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="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></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
    		$(".se-pre-con").fadeOut("slow");;
    	});
    

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