Adding a wait screen for Salesforce AJAX request

While working on one of the Sites project in Salesforce, a requirement was that clicking on checkbox against a row in the table, it should create a record and then reload the table without refreshing the complete page. Everything was simple but one of the requirement was to show a wait screen when user clicks on checkbox. Searching around, I came across this implementation - http://jsfiddle.net/jonathansampson/VpDUG/170/ 
I really liked this implementation - simple, clean and minimal. Referring to this I did the implementation in my Salesforce page.

What I used
As in the example, I used jQuery, a cool cool js library to get this working. Add javascript library to your static resources and inside the script tag on your page define j$ variable as
var j$ = jQuery.noConflict();

Here are the steps:

• Add a div tag to the end of page.

<div class="modal"></div>​

• Add style tag to the page with following contents

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}​

• Create an actionFunction tag based on your requirements. tableList is the id of table that gets re-rendered after AJAX request. Note that we are using onComplete event too.

<apex:actionFunction name="jsActionFunction"  action="{!ServerSideFunction}"  rerender="tableList" oncomplete="jsDoConsiderMeComplete()">
    <apex:param name="eid" value=""/>
    <apex:param name="eName" value=""/>
</apex:actionFunction>
​

• Set the onClick event of inputCheckbox

<apex:inputCheckBox value="{!lst.isChecked}" id="chkbx1" onclick="checkBoxClick('{!lst.eId}', '{!lst.eName}')" />

• Create a javascript function that first displayed the wait screen and then calls the actionFunction method. Another function to hide the wait screen.

function checkBoxClick( eId, eName ) {
    j$('body').addClass("loading");
    jsActionFunction(eId, eName);
}
function jsDoConsiderMeComplete() {
    j$('body').removeClass("loading"); 
}

Make these changes, save the page, fix the issues if any and it should work just the way it is working in the sample page.