Nice idea, but I disagree that this should make us "Forget tacky loading spinners". Loading spinners are a big step forward from wait cursors in that they:
- 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.
One issue I have with this is that due to the commonality of spinners, I associate the wait cursor with waiting on the browser (memory issue, temporary CPU spike, large js script running) rather than an waiting on the results of an ajax request.
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.
I just clicked on your demo and my brain instantly though, oh crap my browsers crashed again. Even though I knew it was going to change the cursor to a wait button.
I vastly prefer loading spinners over wait cursors.
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.
[+] [-] micheljansen|14 years ago|reply
- 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.
[+] [-] tommoor|14 years ago|reply
[+] [-] michaels0620|14 years ago|reply
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.
[+] [-] apricot13|14 years ago|reply
[+] [-] enapupe|14 years ago|reply
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).
[+] [-] enapupe|14 years ago|reply
[+] [-] weavejester|14 years ago|reply
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.
[+] [-] jeffehobbs|14 years ago|reply
[+] [-] startupcto|14 years ago|reply
[+] [-] urbanjunkie|14 years ago|reply
(close tab or close application for you non macheads)