4 ms·

Forget tacky loading spinners, just use a wait cursor

11 points by ptbello 15y ago

startupcto 15y ago
There's no cursor for mobile devices so whatever you think works only works for a percentage of users.
apricot13 15y ago
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.
micheljansen 15y ago
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.
- tommoor 15y ago
  You've said everything I wanted to.
michaels0620 15y ago
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.
weavejester 15y ago
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.
urbanjunkie 15y ago
Because browser wait cursors tend to make me instinctively cmd-w or cmd-q (close tab or close application for you non macheads)
jeffehobbs 15y ago
No cursors on mobile. So.
enapupe 15y ago
Did this (using jquery): 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 15y ago
  Live demo: http://jsfiddle.net/NXqe5/ http://jsfiddle.net/NXqe5/

11 points by ptbello 15y ago

There's no cursor for mobile devices so whatever you think works only works for a percentage of users.

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.

micheljansen 15y ago

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.

tommoor 15y ago
You've said everything I wanted to.

michaels0620 15y ago

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.

weavejester 15y ago

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.

urbanjunkie 15y ago

Because browser wait cursors tend to make me instinctively cmd-w or cmd-q (close tab or close application for you non macheads)

jeffehobbs 15y ago

No cursors on mobile. So.

enapupe 15y ago

Did this (using jquery): 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 15y ago
Live demo: http://jsfiddle.net/NXqe5/ http://jsfiddle.net/NXqe5/