title: Loading screen example
body: <p>My HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="C:\Users\coeconsultant3\Desktop\Loadingexample\abccss.css"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(window).load(function () {
  
              $("#loader").fadeOut("slow");
  
          })
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="loader"&gt;&lt;/div&gt;
      &lt;div id="page1"&gt;
          &lt;p&gt;
              &lt;h1&gt;Hello World !!!
              &lt;/h1&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS for loader :</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>#loader {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      z-index: 9999;
      background: url('C:/Users/coeconsultant3/Desktop/Loadingexample/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
  }
  </code></pre>
  
  <p>I have used script which does different behaviour:</p>
  
  <p>When I use <code>div</code> <code>id = loader</code>, it shows directly the hello world.</p>
  
  <p>When I use <code>div</code> <code>class = loader</code>, it just shows loading gif image and does not go through the page.</p>
  
  <p>I want to know the error for this program</p>