JavaScript - - By Sam Deering

How to Setup A Simple AJAX Loading Image


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;
Login or Create Account to Comment
Login Create Account