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 () {
$("#newhourglass").removeClass("hide");
$.ajax({
. . .
success: function (returneddata) {
$("body").html(returneddata);
$("#newhourglass").addClass("hide");
},
error: function () {
console.log('error in ajax call');
$("#newhourglass").addClass("hide");
}
});
});