Click here to Skip to main content
Click here to Skip to main content

Hourglass cursor for Web/ASP.NET pages

, 9 Sep 2004
Rate this:
Please Sign up or sign in to vote.
Show your users that something *is* actually happening when you do a postback on a web form.


In one of our ASP.NET projects at work, some of the controls caused a post back, but didn't actually change the page visibly. So, we wanted to show an hourglass cursor, like a normal Windows app does when it's busy, to show that the ASP app was actually doing some work, and that the user should wait till it was finished.

JavaScript to the rescue!

Now, I'm a big fan of XHTML and CSS, so my first thought was to CSS... but to implement that dynamically was looking quite hectic... then I thought a bit... "But wait! What about JavaScript?"

JavaScript can be used to do some nifty client-side things, like changing the cursor. In fact, the solution is so simple, it's only about two lines of code.

All you need to do is to write a function like this:

function doHourglass()
{ = 'wait';

Quite simple, huh?

The next step is to get the web form to call that function when a post back occurs. Well, that is another very simple addition. This time, just add an event handler to your body tag in your page.

<body onbeforeunload="doHourglass();" onunload="doHourglass();">

Points of Interest

The first question you're probably asking is, "Why is there both an onbeforeunload and an onunload event handler?" The reason for that is that if your app is being viewed in IE, it seems to prefer the onbeforeunload, whereas other browsers seem to prefer the onunload.

You might also be asking why there is no code to set the cursor back. Well, mainly because there is no need for it. As far as the browser is concerned, this is a new page, so it sets the mouse cursor back to the default pointer.

Further Afield

What we did, so that we don't need to rewrite that JavaScript function in every single page, was to add it to a script file (like "script.js") and then just reference the file in every page. That way, we can also change the operation of the function easily, as it is only changed in one place. And a further advantage is that if we need to add more JavaScript functions, they can be added to our script file, and used on the appropriate page.


10 September 2004 - First posting.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Web Developer
South Africa South Africa
just another of these programming types... knows a little bit about c, c++, java, vc++ and c#... knows a little bit more about delphi... knows a little bit less about natural, cobol and basic... does the web thing from time to time and is heavily into standards compliance... prefers linux to windows too...

Comments and Discussions

GeneralMy vote of 1 PinmemberFrancesco ahdgjahg24-Sep-13 22:39 
GeneralI recommend adding onfocus event to body tag PinmemberSthrudel6-Dec-06 2:46 
QuestionWhat if hourglass cursor is over link? PinmemberMircea Grelus21-Feb-06 1:05 
GeneralUse for button click event PinsussAnonymous3-Jul-05 21:21 
GeneralNot a W3C DOM Standard PinmemberDFU2322-Sep-04 7:20 
GeneralRe: Not a W3C DOM Standard Pinmemberraouls28-Sep-04 3:11 
I know about the OnBeforeUnload event. I use Firefox exclusively as my browser, and so I initially only used the OnUnload event. However, my colleague was complaining that the hourglass didn't work on her machine. I saw that the reason was that IE fired the event only once the new page started loading, not when the command was given to navigate elsewhere (as is the case with Firefox). That's why I included both the OnBeforeUnload and OnUnload events. I did explain this in my article, though perhaps not clearly enough.
Raoul Snyman
Saturn Laboratories
linux user: #333298
GeneralSmartNav problem PinmemberStephenMSmith17-Sep-04 0:01 
GeneralRe: SmartNav problem PinsussAnonymous17-Sep-04 6:31 
GeneralRe: SmartNav problem PinmemberStephenMSmith17-Sep-04 14:12 
GeneralSimple solution PinmemberWoutL11-Sep-04 13:41 
GeneralRe: Simple solution PinsussAnonymous16-Sep-04 0:33 
GeneralRe: Simple solution Pinmemberraouls17-Sep-04 8:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 10 Sep 2004
Article Copyright 2004 by raouls
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid