JQuery ajax loading progress

This will show how you can easily add a JQuery ajax loading progress bar easily. You can do this in less than one minute.

HTML


<div id="loadingDiv" style="display:none;">
<div id="Container">
<img src="images/ajax-loader.gif" alt="loading" /"><span>Loading...</span>
</div>
</div>



Javascripts 


// this should be placed in the page

$(document).ready(function () {
    // The DOM (document object model) is constructed
    // We will initialize the progress bar

    InitializeLoadingProgress();
});

// this can be placed in the page or a js file
function InitializeLoadingProgress() {
    $('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function () {
        $(this).show();
    })
    .ajaxStop(function () {
        $(this).hide();
    });
}

CSS


#loadingDiv
{
    width:100px;
    height:40px;
    left:50%;
    top:50%;
    padding:1px;
    position:absolute;
    border:1px solid #A6A1A3;
    background-color:#DFDCDC;
}

#loadingDiv #Container
{
    width:98px;
    height:38px;
    vertical-align:middle;
    border:1px solid #BFBBBD;
    background-color:#F5F0F0;
}

#loadingDiv #Container img
{
    vertical-align:middle;
    top:7px;
    margin:4px;
    position:relative;
}

#loadingDiv #Container span
{
    top:7px;
    position:relative;
    color:#B0A7A7;  
    font-family:Tahoma;
    font-size:small;
    margin:4px;
}

This ajax loader works in all browsers.