Easy Page Preloader - Cody Paste

Easy Page Preloader in HTML/HTML5.

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.

Before </head>:

<script type="text/javascript">
  
  //Function to hide the loading div
  function loadingDivHide()
  {
      document.getElementById("loading_div").style.display = "none";
      document.getElementById("content_area_div").style.display = "";
  }
  
  </script>
<style type="text/css">
     .loaderClass
     {
        position: absolute;
        top: 50%;
        left: 0px;
        z-index: 999999;
        text-align: center;
        width: 100%;
        height: 200px
        
        
     }
</style>

//Function to hide the loading div

function loadingDivHide()

{

document.getElementById("loading_div").style.display = "none";

document.getElementById("content_area_div").style.display = "";

}

</script>

.loaderClass

{

position: absolute;

top: 50%;

left: 0px;

z-index: 999999;

text-align: center;

width: 100%;

height: 200px

}

</style>

HTML:

<body onload="loadingDivHide()">

<div id="loading_div" class="loaderClass">
<img src="ajax-loader.gif" height="66" width="66"><br>
<h1>Loading...</h1>
</div>

<div id="content_area_div" style="display:none">

<!-- Page content goes here -->

</div>

</body>

<h1>Loading...</h1>

</div>

</div>

</body>

Leave a Reply Cancel reply