Create jQuery Loading Animation to make your website Attractive

A loading animation is important to signal the user that the application is still doing something and the user should wait for an action to complete. This gets even more important when you use Ajax in your webapp.

Using the Ajax library jQuery it is very easy to create a loading animation that will be shown whenever an Ajax request is running.

First of all, you need an animated gif with a loading animation. You can pick a free gif and customize it at ajaxload.info
Include a div containing the image in every page of your webapp. Typically, you will add this div to a layout file or header that you include in every page.

	<div id="loader" class="loader" style="display:none;">
	<img id="img-loader" src="loader.gif" alt="Loading"/>
	</div>

The attribute style=”display:none;” makes the div invisible when the page is loaded.
You can style the div whatever you like using the class “loader”. I decided that I wanted the div to be centered in the middle of the screen on top of the rest of the page.

	.loader {
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    margin-left: -50px; /* half width of the loader gif */
	    margin-top: -50px; /* half height of the loader gif */
	    text-align:center;
	    z-index:9999;
             overflow: auto;
	    width: 100px; /* width of the loader gif */
	    height: 102px; /*hight of the loader gif +2px to fix IE8 issue */
	
	}

To show the loader automatically when an Ajax request is running, add the following jQuery javascript code to every page by including it to a layout file or header.

	
<script type="text/javascript">
	$(document).ready(function(){
	    $("#loader").bind("ajaxSend", function() {
	        $(this).show();
	    }).bind("ajaxStop", function() {
	        $(this).hide();
	    }).bind("ajaxError", function() {
	        $(this).hide();
	    });
	 
	     });
	</script>

This will show the loading animation when an Ajax requests starts and hide it automatically when the Ajax request is complete or when an error occurs.

Additionally, it is possible to use the loader for normal, non-Ajax requests.
An example for this would be an ordinary file upload. If you use plain html, uploading a file does not trigger an Ajax request so your loader wouldn’t be visible automatically.

In your file upload form, give the submit button an html ID, e.g. buttom-upload. Now include the following jQuery javascript code to show the loader when the form is submitted:

	<script type="text/javascript">
	$(document).ready(function(){
	    $('#button-upload').click(function() {
	        $('#loader').show();
	    });
	});
	</script>

You do not have to hide the loader, because when the request completes, a new page is rendered where the loader is not visible.

[ad#468x60-top-header]