Simple JQuery Preloader For Webiste

This Lesson will give the idea how to place a preloader before website load, the preloader concept is need to every website to webpage because while loading your website the preloader tells the visitor to Waite for a while the website data is loading and it also helpful in low band with connections, this lesson will tell you about jquery prelaoder for your webiste lets see the simple code behind this


i just take the div and name it #preloader this div covers the website background, and one more div to display loader image give it name #status see the bellow html code

HTML

<div id="preloader">

 <div id="status"></div>
    
</div>

in the next step include the jquery library insie the head tag, now i am using window object the window object is represents the opens window in the browser and assign on load method inside the function hide the loader image #status div and #preloader div after complete the website loaded, see the bellow code

jQuery

<script type="text/javascript" src="jquery-1.12.2.min.js"></script>

<script>

$(window).on('load',function(){
  
  $('#status').fadeOut(); // will first fade out the loading animation
  
  $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
  
  $('body').delay(350).css({'overflow':'visible'});
  
});
 
</script>

Live Demo   Download Script