How to Create Full Screen Preloading Effect

May 20, 2016

In this tutorial, We will learn how to create full screen simple,clean preloading effect by html/css/image. Sometimes your website contents taking more times to loading. That's can be frustration of your readers. By adding full screen preloading effect, it can reduce readers frustration.

When readers visit your site, they will see it. Then after full website page content load, it will be removed. You can add it anywhere by choosing any image. We created this script by simple way so that you can understand easily. Read from A to Z carefully.

HTML - You need to add following html code after <body> tags

<div id='preloader'>
<div id='status'>
<img alt='' height='64' src='images/preloader.gif' width='64'/>
</div>
</div>

First div id preloader we used for full page screen background color and Second div id status we used for set up image. You will fully understand when you will see css code. You can replace default preloader image url by creating a new one as your like and replace this default image url from html.

CSS - You need to add following css code in your css file

#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #222222;
z-index: 99999;
height: 100%;
}
#status {
position: absolute;
left: 50%;
top: 50%;
width: 64px;
height: 64px;
margin: -32px 0 0 -32px;
padding: 0;
}

Your preloader image size must be 64x64. If your image background color white or other, you can use same color for full page screen from #preloader css code by replacing #222222 background color code.

Javascript - You need to add following javascipt code

/*====================================
Preloader
======================================*/

$(window).load(function() {

$("#status").fadeOut("slow");

$("#preloader").delay(500).fadeOut("slow").remove();

})

$("#status").fadeOut("slow"); This code will first fade out the loading animation.
$("#preloader").delay(500).fadeOut("slow").remove(); This code will fade out the whole DIV that covers the website.

Comments