Now a days every websites are powered by Preloader. It will add interactivity to a webpage with some sort of animations.  Today I am going to tell how to create a simple jQuery Preloader with 2 lines of jQuery code & few lines of CSS code.

jQuery Preloader for websites

jQuery Preloader

jQuery Code to Create Preloader

// makes sure the whole site is loaded
jQuery(window).load(function() {
        // will first fade out the loading animation
	jQuery("#status").fadeOut();
        // will fade out the whole DIV that covers the website.
	jQuery("#preloader").delay(1000).fadeOut("slow");
})

Here I have used jQuery window onload function – it waits for the assets in the page to be completely loaded

CSS Code

#preloader  {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #fefefe;
     z-index: 99;
    height: 100%;
 }

#status  {
     width: 200px;
     height: 200px;
     position: absolute;
     left: 50%;
     top: 50%;
     background-image: url(ajax-loader.gif);
     background-repeat: no-repeat;
     background-position: center;
     margin: -100px 0 0 -100px;
 }

HTML Usage

<div id="preloader">
  <div id="status">&nbsp;</div>
</div>

View Live Demo & Download

Please don’t forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!

Thanks!

If you enjoyed this article, Get email updates (It’s Free)
Create a Simple jQuery Preloader for Websiteshttp://w3lessons.info/wp-content/uploads/2013/07/jQuery-Preloader.pnghttp://w3lessons.info/wp-content/uploads/2013/07/jQuery-Preloader-150x150.pngKarthikeyan KMysqlJquery,new techniques,tips & tricks
Now a days every websites are powered by Preloader. It will add interactivity to a webpage with some sort of animations.  Today I am going to tell how to create a simple jQuery Preloader with 2 lines of jQuery code & few lines of CSS code.jQuery Code to Create...