Show Loading Icon Until the Page Is Load

show loading icon until the page is load?

HTML

<body>
    <div id="load"></div>
    <div id="contents">
          jlkjjlkjlkjlkjlklk
    </div>
</body>

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";
      },1000);
  }
}

CSS

#load{
    width:100%;
    height:100%;
    position:fixed;
    z-index:9999;
    background:url("/loading.gif") no-repeat center center rgba(0,0,0,0.25)
}

Note:

you wont see any loading gif if your page is loaded fast, so use this code on a page with high loading time, and i also recommend to put your js on the bottom of the page.

DEMO

http://jsfiddle.net/6AcAr/ - with timeout(only for demo)

http://jsfiddle.net/47PkH/ - no timeout(use this for actual page)

update

http://jsfiddle.net/d9ngT/

Display a loading bar before the entire page is loaded

Use a div #overlay with your loading info / .gif that will cover all your page:

<div id="overlay">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

jQuery:

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

Here's an example with a Loading bar:

jsBin demo

;(function(){
  function id(v){ return document.getElementById(v); }
  function loadbar() {
    var ovrl = id("overlay"),
        prog = id("progress"),
        stat = id("progstat"),
        img = document.images,
        c = 0,
        tot = img.length;
    if(tot == 0) return doneLoading();

    function imgLoaded(){
      c += 1;
      var perc = ((100/tot*c) << 0) +"%";
      prog.style.width = perc;
      stat.innerHTML = "Loading "+ perc;
      if(c===tot) return doneLoading();
    }
    function doneLoading(){
      ovrl.style.opacity = 0;
      setTimeout(function(){ 
        ovrl.style.display = "none";
      }, 1200);
    }
    for(var i=0; i<tot; i++) {
      var tImg     = new Image();
      tImg.onload  = imgLoaded;
      tImg.onerror = imgLoaded;
      tImg.src     = img[i].src;
    }    
  }
  document.addEventListener('DOMContentLoaded', loadbar, false);
}());

*{margin:0;}
body{ font: 200 16px/1 sans-serif; }
img{ width:32.2%; }

#overlay{
  position:fixed;
  z-index:99999;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:rgba(0,0,0,0.9);
  transition: 1s 0.4s;
}
#progress{
  height:1px;
  background:#fff;
  position:absolute;
  width:0;                /* will be increased by JS */
  top:50%;
}
#progstat{
  font-size:0.7em;
  letter-spacing: 3px;
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:100%;
  text-align:center;
  color:#fff;
}

<div id="overlay">
  <div id="progstat"></div>
  <div id="progress"></div>
</div>

<div id="container">
  <img src="http://placehold.it/3000x3000/cf5">
</div>

Is there a way to having loading animation show until the page is fully loaded?

Use Window: load event.

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

Check the below example for reference.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      #loader {
      height: 100vh;
      width: 100%;
      background-color: black;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
    }

    #loader img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 30%;
    }
    </style>

    <title>The Loader</title>
  </head>
  <body>
    <!-- Div for loader placement -->
    <div id="loader">
      <img src="loader.gif" />
    </div>

      <div>
        <span>We'll answer you soon!</span>
      </div>
    </section>

<script>

  //hide the loader after page is loaded fully
  var loader = document.getElementById("loader");
  window.addEventListener("load", function () {
    loader.style.height = "100%";
    loader.style.width = "100%";

    loader.style.borderRadius = "50%";
    loader.style.visibility = "hidden";
  });

</script>
  </body>
</html>

Show loading icon until table has loaded

Place a Loading text/image in a div.

<div id="loading" style="display: none;">Loading..</div>

Control the appearance of above div With jQuery ajaxStart & ajaxStop methods.

$(document).ajaxStart(function(){
  $("#loading").show();
}).ajaxStop(function() {
  $("#loading").hide();
});

The above method triggers whenever there is an active AJAX call.

Display a loading icon until the page loads completely AngularJS

You can do this in your main controller or the controller of your view,
Make sure to wrap your view content around the ng-view directive

<div ng-view ></div>

You can use the above directive as a class or an element as well.

$viewContentLoaded :
Emitted every time the ngView content is reloaded.

$scope.$on('$viewContentLoaded', function(){
  //Here you can hide your pre-loader
});

This event is fired after your view is reloaded.

Display spinner until page fully loads

@REv3nG3's answer should work, but here's an alternative:

window.addEventListener('load', function() {
   document.getElementById('loader').style.display = 'none';
});

In this case, you loader would have to have an id of #loader.

Happy coding!
Tilier

Show Loading Icon Until the Page Is Load