How to make a loading.gif appear using jQuery?

Question

I have a tabbed box that displays different information depending on which tab is active. How can I make to where when a user clicks on a tab a loading gif appears in the foreground of the .print-area and just dims the background until everything is loaded? I also have a filter option so the user can filter the contents in the .print-area so however we manage to do this cant be just on load of this area... it has to work anytime something needs to change in the area. The code below is my code, modified slightly to preserve privacy.

I am using ajax/jquery to load any information and alter any information in the .print-area .

Html

<div id="tabbed-box" class="tabbed-box">
<ul id="tabs" class="tabs">
    <li><a href="#">Access Log</a></li>
    <li><a href="#">Conduit Log</a></li>
    <li id="space"><a href="">&nbsp;</a></li>
</ul>

<!--Main box area under tabs-->
<div id="content" class="content">
    <table height="auto" width="auto">
        <td align="left" valign="top" width="35%">
            Keyword:&nbsp;<input type="text" id="highlight_box" class="text_box" value="--Text--" /> &nbsp;
            <input type="button" id="highlight" value="Highlight" /> //when clicked the loading gif appears and highlight action begins
        </td>
        <td align="right" valign="top">
            <img id="play_pause_toggle" src="images/Pause.png" /> //there is a tail feature and this would toggle it with jQuery
        </td>
    </table>

    <!--Print area for the Access log-->
    <div id="access_content" class="tabbed-content">
        <div id="access_log_print" class="print-area">
                //When this tab is clicked a jQuery function will be called that will load the log into this section
        </div>
    </div>

    <!--Print area for the Error log-->
    <div id="error_content" class="tabbed-content">
        <div id="error_log_print" class="print-area">
        //When this tab is clicked a jQuery function will be called that will load the log into this section
        </div>
    </div>                           
</div>

Answer 1

showLoadingMsg();
$.ajax({
    url  : '<url>',
    success : function (serverResponse) {
        hideLoadingMsg();
    }
});

function showLoadingMsg() {
    $('body').append($('div').css({
        position   : 'absolute',
        width      : '100%',
        height     : '100%',
        zIndex     : 1000,
        background : '#000',
        opacity    : 0.5
    }).attr('id', 'loading-message'));
}

function hideLoadingMsg() {
    $('#loading-message').remove();
}

This will display an opaque overlay over your site when the showLoadingMsg() function is called and that overlay will be removed from the DOM when the hideLoadingMsg() function is called.

To show this overlay when an AJAX request is being made, we call showLoadingMsg() just before the AJAX call and in the AJAX call's callback function we call hideLoadingMsg() .

If you are using .load() then your code would look more like this:

showLoadingMsg();
$('.print-area').load('<url>', function () {
    hideLoadingMsg();
});

UPDATE

function showLoadingMsg() {
    $('#access_log_print').css('opacity', 0.5).append('<img />').attr('src', '/path/to/loading-spinner.gif').css({
        position   : 'absolute',
        width      : 100,
        height     : 20,
        marginTop  : -10,
        marginLeft : -50,
        left       : '50%',
        top        : '50%',
        zIndex     : 1000
    }).addClass('loading-spinner');
}

function hideLoadingMsg() {
    $('#access_log_print').css('opacity', 1).children('.loading-spinner').remove();
}