title: How to load the loading image/spinning gif until index.html page is loaded?
body: <p>I created a web page using on angular. My page is loading very slow. Taking 5 to 10 sec.
  In meanwhile, I want to show some loading image or spinning gif. </p>
  
  <p>In below js fiddle achive the above problem in javascript. I want to use this functionality in the angular js </p>
  
  <p>html</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="load"&gt;&lt;/div&gt;
  &lt;div id="contents"&gt;
        jlkjjlkjlkjlkjlklk
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>js</p>
  
  <pre><code>document.onreadystatechange = function () {
  var state = document.readyState
  if (state == 'interactive') {
     document.getElementById('contents').style.visibility="hidden";
  } else if (state == 'complete') {
    setTimeout(function(){
       document.getElementById('interactive');
       document.getElementById('load').style.visibility="hidden";
       document.getElementById('contents').style.visibility="visible";
    },10000);
   }
  }
  </code></pre>
  
  <p>css </p>
  
  <pre><code>#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(0,0,0,0.25)
  </code></pre>
  
  <p>`<a href="http://jsfiddle.net/d9ngT/" rel="nofollow">http://jsfiddle.net/d9ngT/</a> </p>