Preloading Animation Before the Document is Ready

In Responsive Web Design (RWD), you can eventually encounter a messy page structure when loading a page, especially if you a have slow internet connection, though you have a correct CSS adjustment when all resources are fully loaded. Now, there is an elegant way to handle that, you can hook animations, images, or texts while waiting to fully load the content and this can be handle using jQuery .load() function.

<!DOCTYPE html>
<html>
<head>

<style>
#preloader {
 background: #fff;
 position: fixed;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 z-index: 9998;
}

.loader {
 background: #ddd;
 position: absolute;
 display: inline-block;
 height: 40px;
 width: 40px;
 left: 50%;
 top: 50%;
 margin: -20px 0 0 -20px;
 text-indent: -9999em;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
 animation: ball-scale 1s 0s ease-in-out infinite;
}

@-webkit-keyframes ball-scale {

 0% {
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 }

 100% {
 opacity: 0;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
 }
}

@keyframes ball-scale {

 0% {
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
 }

 100% {
 opacity: 0;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 -o-transform: scale(1);
 transform: scale(1);
 }
}
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

</head>
<body>
 <!-- preloader kicks -->
 <div id="preloader">
 <div class="loader">Loading...</div>
 </div>
 <!-- preloader ends -->

<p> This is your page content <p>

<script>
$(window).load(function() {
 $('.loader').fadeOut();
 $('#preloader').delay(300).fadeOut('slow');
});
</script>

</body>
</html>

Also please check this demo on jsfiddle

For more spinner animations you can search on Google using this query and you will land you to a bunch of cool animations to choose of.

In connection with this post, I launched the pre-loader for WordPress called Page Loading Effects. It is lightweight WordPress plugin that you will surely love it.

If you have better solution than this, please provide me your feedback below.

Thank you!

Preloading Animation Before the Document is Ready1.67/5 (33.33%) 6 votes
About

Elvin is one of the contributors of InnoveDesigns.com. He has been creating Wordpress Plugins, Magento Extensions, & Mobile Applications. If you find this article useful, please Follow him on .

Published under Responsive