How to Add a CSS Loading Image while your Webpage is still Loading

There are two things you could use as your loading image: (1) a gif image that you could host on your website, (2) a rotating image generated by CSS3.

We're going to do the latter for this tutorial. While we're using CSS animation, we're also going to be dependent on jquery. If you're already using jquery, yey! You can skip to Step 2. If not, well, just add jquery in your html resources in Step 1.

Add this on your head tag (after <head>):

Add this on your CSS:

/* Pageloader
---------------------------------------------------------------------------------------------------------- */
.finload {
 display:none;
}
#pageloader {
 position: fixed;
 display: table;
 top: 0;
 left: 0;
 text-align: center;
 width: 100%;
 height: 100%;
 background: rgba(255,255,255,0.1); /*CHANGE BACKGROUND COLOR*/
 z-index: 9999; 
}
 #pageloader .loading-page .load-icon {
 width: 50px;
 height: 50px;
 margin: auto;
 opacity: 0.9;
 border-right: 5px solid #000; /*CHANGE LOADING IMAGE COLOR*/
 border-bottom: 5px solid transparent;
 border-radius: 100%;
 -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
      -o-animation: spin 1s linear infinite;
         animation: spin 1s linear infinite;
}
.tb-cell {
 display: table-cell;  vertical-align: middle;
}
@keyframes spin {
  0% {     transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(359deg);   }
} @-webkit-keyframes spin {   0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }   50% {     -moz-transform: rotate(180deg);
  }   100% {
    -moz-transform: rotate(359deg);   }
}
@-o-keyframes spin {   0% {
    -o-transform: rotate(0deg);
  }
  50% {
    -o-transform: rotate(180deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}

Just read the comments on the css to change the background color and the loading image color.

Add this html markup after the body tag (after <body>):

<!-- START PAGELOADER -->
    <div class='pageload'>
        <div id='pageloader'>
            <div class='tb-cell'>
                <div class='loading-page'>
                    <div class='load-icon'/>
                </div>
            </div>
        </div>
    </div>
<!-- END PAGELOADER -->

Add this on your body tag (before </body>):

There are 4 ways to do this. If the first one works for you, then good. If not, just select either of the remaining ones.

 <script type='text/javascript'>
    $(window).load(function() {
      $('.pageload').fadeOut(100);
    });
  </script>

Note that 100 is the speed in milliseconds, you can change the speed.

  <script type='text/javascript'>
    $(window).load(function() {
      $('.pageload').remove();
    });
  </script>

<script type='text/javascript'>
$(window).load(function() {
  $('.pageload').css({'display':'none'});
 });
</script>

<script type='text/javascript'>
$(window).load(function() {
  $('.pageload').addClass('finload');
});
</script>

Take note that it is in this last option that we're using the css style for class finload. That's its sole purpose. If either options 1 or 2 works for you, then remove .finload css style.

That should look about that simple. Feel free to comment what worked for you.