Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

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

4.00/5 (6 votes)
22 Sep 2016CPOL 14.3K  
A simple way to add a fancy-pants custom hourglass to your page with a (very) little HTML and JavaScript

The Gilded Age

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

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

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

JavaScript
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:

HTML
<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:

HTML
<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:

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

...and then hide it again like so:

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

In context, you might have code something like this:

JavaScript
$("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");
            }
        });
    });

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)