Update: Right after posting this I received quite a bit of feedback in defense of regular loading spinners. Some valid arguments in favor are summed up nicely in this Hacker News thread:
- Cursors won’t work on touch devices of course.
- Wait cursors might be too easily associated with a frozen browser/system.
- A spinner may indicate more clearly which part of the interface is updating.
So think carefully before applying the following technique on a large scale. It might be suited in specific conditions though.
There are loads of funky “loading” animated gifs out there, and these days I also encounter a few CSS spinners. But a technique I haven’t seen a lot is simply using the cursor property to convey the message.
Desktop apps usually use the cursor to indicate that users have to wait. Most of the time the cursor is exactly where the user is looking, so they won’t miss the message. Browser support for cursor is very good too.
You shouldn’t solely rely on the cursor – graying out the loading parts of the interface works well too – but for your next web app you could try slapping a loading class to your body, or any other element, and using
body.loading { cursor: wait; }
You might have to explicitly add form elements and links to the selector, so they don’t trigger the default or pointer cursor. Adding !important won’t work. So something like this:
body.loading, body.loading input, body.loading a { cursor: wait; }
Here’s a quick demo. You can use other cursors as well, or even a custom one with the url(...) value – although animated images won’t work, and other restrictions apply.
