Add an ajax request indicator to a page in a fixed position for debug purposes

jqueryRequestIndicator.js

$(function () {

    //add a requesting indicator to the page
    $(document.body).append(
        $('<div id="requesting" />').css({
            top: '0px',
            right: '0px',
            height: '5px',
            width: '5px',
            'background-color': 'gray',
            position: 'fixed'
        }));

    //set it up to show/hide if requests are in progress
    $("#requesting").bind("ajaxSend", function () {
        $(this).show();
        $(this).css('background-color', 'gray');
        console.log("Sent Request");
    }).bind("ajaxSuccess", function () {
        $(this).css('background-color', 'green');
        console.log("Response Received OK");
    }).bind("ajaxError", function () {
        $(this).css('background-color', 'red');
        console.log("Error Receiving Response!");
    }).bind("ajaxComplete", function () {
        $(this).fadeOut('slow');
        console.log("Request Complete");
    });

});