Jquery Ajax animation?

Question

Hi there,

I have a ajax jquery petition ... is there a standard way of displaying a nice animation while it completes.

Anybody have any info?

Its just that petition is taking around 15 seconds when there is an error in the server... so i would like to display an animation in case of this situation...

I am not necessarily talking about jquery animation methods, but maybe some kind of animated gif ... or something

Any ideas?

Answer 1

you want this: http://www.ajaxload.info/

use that to generate loading images that match the style of your page.

Edit: The css/html would be like (note: not tested):

.container {
    position: relative;
    height: 20ex;
    width: 20em;
}

.hideCover {
    display:none;
}
.loadCover { 
    display:block;
    position:absolute;
    top:0;
    left:0;
    background-color:white;
    height:100%;
    width:100%;
    opacity:0.5;
    filter:alpha(opacity=50); 
    text-align:center;
} 

.loadCover > img { 
    position:relative;
    top: 10ex;
}

<div class='container'>
    <div id='receiver'>
       ...your area to load into ....
    </div>
    <div class='hideCover'>
         <img src='...path to loading image...' />
    </div>
</div>

Answer 2

• Before you do the post, show a spinner (you can make them at www.ajaxload.info)
• Post to server, and while the user is waiting, the spinner is spinning.
• When the post is complete, hide the spinner.

EDIT: I found another question about this subject on StackOverflow.