Simple Website Preloader with jQuery

Hi guys, we have already published a good tutorial on Preloader With Progress Bar Using Jquery. Today we will see easiest way of doing this with two lines of jQuery. Yeah just two lines it’s the quick way of displaying page once all the elements on the page have been loaded completely. Also we will see some really cool animated icons that you can show while the page is loading with custom text message.

loader

           Live Demo    [sociallocker]DOWNLOAD CODE[/sociallocker]

Let’s see how easily you can add it to any webpage. Below is our simple jQuery code which will display loading icons and will fade them out once all the page elements have been loaded.


jQuery(window).load(function() {
 jQuery("#status").fadeOut("slow");
 jQuery("#loader").delay(500).fadeOut();
})

load function will ensure it will be executed when all page elements have been loaded. Below are some cool animated images that you can use:

Preloader_1 Preloader_2 Preloader_3 Preloader_4 Preloader_7

You will see more animated images in different sizes in the downloaded zip file.

We also have little CSS code just to keep loading images centered and add some content (Bg image). Below is our CSS code:

</p>
#loader {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #fefefe;
 z-index: 99;
 height: 100%;
 }
#status {
 width: 200px;
 height: 200px;
 position: absolute;
 left: 50%;
 top: 50%;
 background-image: url(Preloader_4.gif);
 background-repeat: no-repeat;
 background-position: center;
 margin: -100px 0 0 -100px;
 }
.red{
color:red;
}
body{
background: url(https://infotuts.com/demo/website-preloader-jquery/bg.jpg);
background-repeat: no-repeat;
width: 100%;
background-size: 100%;
}
<p style="text-align: justify;">

It was a quick tutorial to show how powerful jQuery is. Just few lines of code and it can solve a problem of bad loading of webpages with user friendly solution. We are coming with some really good scripts that you guys will surely love. I would appreciate if you give us a little favor by liking our FB page and follow me on Google Plus. Also share this simple post with your friends and followers.

1 thought on “Simple Website Preloader with jQuery”

  1. Pingback: Simple Website Preloader with jQuery | SOFTWARELIST

Comments are closed.