How to Replace a Web Page's Default Hourglass with a Fancy One

The Gilded Age

I was using the built-in "wait cursor" to begin "hourglassing" when an operation began, like so:

document.body.style.cursor = 'wait';

...and then changing it back to the default when the operation completed, like so:

document.body.style.cursor = 'pointer';

For some reason, that blue spinny donutesque thingy gave my manager the fantods, though, so I replaced it with a fancy-pants, whiz-bang, gold-leaf, kid-glove, diamond-breastpin "hourglass" this way:

Add a line of HTML to reference the "Font Awesome" fonts:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" 
rel="stylesheet" type="text/css" 

Then add a "span" HTML element in your code where you want the "hourglass" to (sometimes) display, like so:

<span id="newhourglass" 
class="fa fa-4x fa-refresh fa-spin boxRefresh hide" runat="server"></span>

Finally, add the JavaScript to unhide the font character/hourglass like so:

$("#newhourglass").removeClass("hide");

...and then hide it again like so:

$("#newhourglass").addClass("hide");

In context, you might have code something like this:

$("body").on("click", "#btnGetData",
    function () {
        //document.body.style.cursor = 'wait';
        $("#newhourglass").removeClass("hide");

        $.ajax({
	        . . .
            success: function (returneddata) {
                $("body").html(returneddata);
                //document.body.style.cursor = 'pointer';
                $("#newhourglass").addClass("hide");
            },
            error: function () {
                console.log('error in ajax call');
                //document.body.style.cursor = 'pointer';
                $("#newhourglass").addClass("hide");
            }
        });
    });