Adding Loading Screen in Website

Regularly as a web designer, we build websites that can be reasonably media intensive (e.g. It can be portfolio or photography website). It may contain lots of graphics, videos or flash contents, and thousands lines of code so page can be load slow. But there has a better way to display awesome loading screen instead of those half loaded pages.

Let’s start, To adding loading screen to your website with the following simple steps.

Find a beautiful page loading graphic

There are two way to find out an attractive page loader. 1) Find from internet and 2) Design your own loading graphics with photography tools or using CSS(3). In this article, i have designed custom loading graphic with CSS3 animation.

Add Loading Screen
Add Loading Screen

Adding HTML stuff

Add the following code into your HTML at the beginning oftag or before the closing oftag.

<div class="loader-wrap">
<div class="loader">
<div class="box-1 box"></div>
&nbsp;
<div class="box-2 box"></div>
&nbsp;
<div class="box-3 box"></div>
&nbsp;
<div class="box-4 box"></div>
&nbsp;
<div class="box-5 box"></div>
</div>
&nbsp;

</div>

Setting up loader with CSS

*, *:after, *:before{
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
}
body{
	margin: 0;
	font-family: "Open Sans",sans-serif;
}
.loader-wrap{
	background: #333 url("back.png") repeat center center fixed;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 99999;
}
.loader{
	font-size: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	    -ms-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
	width: 120px;
	height: 20px;
}
.loader:after{
	color: rgba(0,183,229,0.9);
	content: "Loading...";
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 15px;
	position: absolute;
	width: 120px;
	top: 40px;
	left: 5px;
	text-align: center;
}
[class*='box-']{
	display: inline-block;
	font-size: 15px;
	line-height: 20px;
	margin-right: 5px;
	height: 20px;
	width: 20px;
	border: 5px solid rgba(0,183,229,0.9);
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	box-shadow: 0 0 10px #2187e7;
	border-radius: 50%;
	-webkit-transform: scale(0.7);
	    -ms-transform: scale(0.7);
	        transform: scale(0.7);
	-webkit-animation: loader 1s infinite linear;
	        animation: loader 1s infinite linear;
}
[class*='box-']:last-child{
	margin-right: 0;
}
.box-1{
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
}
.box-2{
	-webkit-animation-delay: .3s;
	        animation-delay: .3s;
}
.box-3{
	-webkit-animation-delay: .2s;
	        animation-delay: .2s;
}
.box-4{
	-webkit-animation-delay: .3s;
	        animation-delay: .3s;
}
.box-5{
	-webkit-animation-delay: .4s;
	        animation-delay: .4s;
}
@-webkit-keyframes loader{
    0% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7) rotate(10deg);
                transform: scale(0.7) rotate(10deg);
        opacity: 0.1;
    }
}
@keyframes loader{
    0% {
        -webkit-transform: scale(1.2);
                transform: scale(1.2);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(0.7) rotate(10deg);
                transform: scale(0.7) rotate(10deg);
        opacity: 0.1;
    }
}

Adding jQuery

This is the final step of this article, Here we are gonna adding jQuery in your web page to display loading screen until website is loaded successfully.

Copy the following code in section of your document.

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

And again add this code in your footer means that before closing of tag. This code will smoothly hide the loading screen when DOM is completely loaded.

$(window).load(function() {
	$(".loader-wrap").fadeOut("slow");
})

5 Replies to “Adding Loading Screen in Website”

  1. Andrew

    Hello, just wanted to let you know that this tutorial was extremely helpful. However, I am experiencing some issues in trying to substitute your CSS loading animation with another one. Is there any CSS code the has to implemented into the new loading animation?
    Thanks, Andrew

  2. Zane

    great publish, very informative. I wonder why the other experts of this sector do not understand this.
    You must continue your writing. I am sure, you have a huge readers’ base already!

Leave a Reply

Your email address will not be published. Required fields are marked *