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