Forget tacky loading spinners, just use a wait cursor
bricss.net
bricss.net
- Can be used to show what is loading, especially if you use AJAX to update only part of the screen/content, rather than indicate a global loading state.
- Work on devices that do not have a cursor. Touch anyone?
- Don't make you feel like you are running Windows 3.1
- Don't make you fear your browser/system has frozen.
For me at least, using this technique would probably cause me to perceive the site as being slower or more resource intensive than it truly is.
var loadingLayer = { step: 0, add: function(){ this.step += 1; //didn't know how to call checkState() automatically after any other call this.checkState(); }, remove: function(){ this.step -= 1; this.step < 0 && (this.step=0); this.checkState(); }, clear: function(){ this.step = 0; this.checkState(); }, checkState: function(){ if (this.step === 0){ $("body").removeClass("loading"); } else { $("body").addClass("loading"); } } }; $(document).ajaxStart( function(){ loadingLayer.add(); }); $(document).ajaxComplete(function(){ loadingLayer.remove(); });
I know the JS is uggly but i'm not an js expert (it works).
A wait cursor usually represents some form of synchronous wait to the entire application. If I get the wait cursor in a native application, there's a good chance that I'll need to wait for it to finish before I can continue my work flow.
A loading spinner is often more asynchronous and targeted. If I click the preview button in GitHub, then only that element is being loaded, and it doesn't stop or slow down any other part of the UI.
A good UI should be asynchronous; ideally there shouldn't be any operation that locks or slows down the UI. If an expensive operation is taking place, place a busy notifier on the affected elements. Having a wait cursor for the whole application or window seems an anachronism.
(close tab or close application for you non macheads)