How to Setup A Simple AJAX Loading Image

By Sam Deering


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 {
    -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



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

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