jQuery Full Page Loading Animation

Heavy websites take a lot of time to load and this can be annoying for the user browsing the website. It seems better to let the user know that the website is loading and to have patience, rather than having the user see half-loaded or the still loading website. There are numerous ways to do that, but in today’s tutorial, I am going to show you a way to show a simple coloured screen with a loading animation on the enter of the page. Once the page loads, this animation will fade out to the completely loaded website. For this tutorial, I am going to use the jQuery background Image slideshow that we created in the last tutorial. In case you missed it, feel free to check it out first.

DEMO : With Loading Animation | Without Loading Animation

Download Source Code

If you go through the demo links that I just shared with you, you would understand what is the need for having a page loading animation on your website if the website makes use of a lot of images. This simple trick that I am going to use, can be implemented on each and every page, without much effort. Before we start, I would recommend you to download Notepad++ for editing and creating this awesome effect. You can read more about it in this previous article that I wrote.

• Notepad++ for Enhanced Experience

Without wasting any more time, let’s get started. As mentioned earlier, I would be using the jQuery Background Image Slideshow, but you may use any of the webpages that you like.

HTML & jQuery Part

The HTML part for this tutorial is not much. All we need to do is, just add a new div with the id “loader” and then write the jQuery code to fade the loader when the page is loaded completely.

1. Just after opening your Body tag, add the following lines of code, to create a div element.

<div id="loader">
</div>

2. Next, just before closing your Body tag, add the following lines of code to implement the jQuery. Also, make sure that your webpage has the jQuery Library linked. If you don’t have that, you can grab the latest version of it from the official website.

<script>
 $(window).load(function(){
 $("#loader").fadeOut("slow");
 });
 </script>

CSS Part

The CSS part is also pretty simple, we just add the styling for the loader on the webpage by specifying a background colour and the image that we will be using for the loading animation. I am using the following image for the loading animation and I have it placed in a folder named “images” in my root folder. The CSS file is inside a folder called CSS and hence the relative linking of the file has been done.

1. Just add the following lines of code to the CSS file, which will take care of everything for the loading animation.

#loader{
 z-index:999999;
 display:block;
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:url(../images/loader.gif) 50% 50% no-repeat #cccccc;
}

Important Note:

In case you need to implement this loader on each and every webpage, then I would recommend you to have it set up in your external JavaScript file, which is linked to all the pages. Doing this decreases the number of lines of code that we need to add to each and every page.

To view the entire project, you may check the demo versions that I have here, or you can download the source code for your own reference.

DEMO : With Loading Animation | Without Loading Animation

Download Source Code

Well, that’s it for this tutorial. I hope this tutorial helped you in one or the other way. If you face any problem, feel free to contact me using the contact page or leave a comment down below this post. I will surely get back to you. Also, don’t forget to subscribe to Slash Coding for latest post updates via RSS Feeds, Facebook, Google+ or Twitter.