Jquery Ajax animation

ajaxanimationjquery

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?

Best Solution

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>