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.
Read more: DesignDim
Posts
