This is a mirror of official site: http://jasper-net.blogspot.com/

How to create a Loading Animation / Spinner using jQuery

| Thursday, November 11, 2010
Many web applications have some kind of loading animation (aka spinner).

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="spinner" class="spinner" style="display:none;">
   <img id="img-spinner" src="spinner.gif" alt="Loading"/>
</div>

The attribute style=”display:none;” makes the div invisible when the page is loaded.

Read more: techscouting through the news

Posted via email from .NET Info

0 comments: