JavaScript
Article
By Sam Deering

How to Setup A Simple AJAX Loading Image

By Sam Deering

ajax-loading

This is how you can display a simple loading image while your AJAX requests are being processed. Using the .ajaxStart() and .ajaxStop() functions will ensure the loading image is displayed for all AJAX requests fired off on the web page.

View Demo

The Code

The Loading Image

You can also create your own animated GIF using Online AJAX Image Tools.

CSS Only Version

This is the CSS to setup a CSS loading image while your AJAX request is loading.

#loading {
    position:fixed;
    top:0px;
    right:50%;
    background:#fff;
    width:60px;
    height:20px;
    padding:0px;
    padding:4px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    -webkit-box-shadow: 3px 3px 3px #0a0a0a;
    -moz-box-shadow: 3px 3px 3px #0a0a0a;
    box-shadow: 3px 3px 3px #0a0a0a;
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-left-width: 2px;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-color: #CCC;
    border-bottom-color: #CCC;
    border-left-color: #CCC;
    z-index: 999999;
}
Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.