Loading Animation While Page Loads

This fiddle goes over how to display a loading animation while the page content loads. Using jQuery and a little CSS, we hide certain elements on the page and display a loading animation GIF until the page is fully loaded. This can be used for an entire page or specific sections of the page. Learn more at jameskaveh.net

by André Albson

HTML

<!-- div for loading content, ensure this is outside of the content wrapper -->
<div class="loader">Loading...</div>

<!-- once page has loaded, loading DIV will hide and content DIV will show -->
<div class="content">
    <ul>
        <li>The page has loaded completely.</li>
        <li>View more at <a href="http://www.jameskaveh.net">JamesKaveh.Net</a></li>
        <img src="http://4k.com/wp-content/uploads/2014/06/4k-image-tiger-jumping.jpg" />
    </ul>
</div>

CSS

.loader:before,
.loader:after,
.loader {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
}
.loader {
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #ffffff;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #ffffff;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em #ffffff;
  }
  40% {
    box-shadow: 0 2.5em 0 0 #ffffff;
  }
}

JavaScript

// put this script in between the <head> tags of your document
$(document).ready(function () {
    $(".content").hide(); // hides the content DIV
});

// when all elements of the page are completely loaded, script below executes
$(window).load(function () {
    $(".loader").fadeOut("slow"); // loading DIV fades out
    $(".content").fadeIn("slow"); // content DIV fades in
});