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#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.