JavaScript
Article

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;
}

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.