title: Javascript show the loader icon while refreshing
body: <p>I need to show the loader icon when the window is refreshing.And it should hide when the document is ready.What i have tried</p>
  
  <p>//one solution</p>
  
  <pre><code>&lt;script&gt;
  document.onreadystatechange = function () {
    var state = document.readyState
    if (state == 'complete') {
        setTimeout(function(){
            document.getElementById('interactive');
            document.getElementById('load').style.visibility="hidden";
        });
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>//another solution</p>
  
  <pre><code>&lt;script&gt;
  window.onbeforeunload = function WindowLoad() {
  inst.close();
  inst.destroy();
  document.getElementById('load').style.visibility="block";
  }
  window.onload = function WindowLoad() {
        setTimeout(function(){
      document.getElementById('interactive');
      document.getElementById('load').style.visibility="hidden";
        });
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>//style for loader- User Reference</p>
  
  <pre><code>&lt;style&gt;
  #load{
       width:100%;
       height:100%;
       position:fixed;
       z-index:9999;
       background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(129, 129, 131, 1)
   }
  &lt;/style&gt;
  </code></pre>
  
  <p>What i am getting?
  I am getting the loader icon once after the page refresh is complete?I tried running both the solutions commenting each of the solutions.</p>