18

This question is asking about why spinning animations tend to used as "conventional" indefinite loading animations - it is not asking why a particular software/app/OS uses a spinner.

Also the question is asking about loading sequences in general, not limited to mouse cursors.

Examples (not only limited to mouse cursors):

Windows Vista, 7 and 8 uses a ring cursor that has a spinning glow.

Mac OS X has its spinning beachball. The Preview app shows a spinner as well when loading the preview of a file.

... and many many more. Except for the recent ones which don't use spinners, such as Windows Phone's dots which move across the screen.

Obviously the animation gives a cue to the user that the entire system has not frozen yet (hence why the icon/cursor is still animating), but why, why spinners?

Improve this question
4
  • 3
    The original Apple Max OS used to use a clock with hands which went around and (I think) Windows used an egg timer. So they both directly indicated: "this takes time". You used to see rather a lot of them. The use of spinners would seem to reflect the Apple clock, particularly given the direction of rotation.
    – PhillipW
    Aug 22, 2013 at 17:00
  • 1
    Ironic that a spinning circle should be used to represent progress (as "spinning in circles" is a phrase in English meaning "getting nowhere"!)
    – uxzapper
    Aug 22, 2013 at 23:57
  • Very similar to "Indeterminate Progress Indicator Styles" ux.stackexchange.com/questions/21727/…
    – Michael Zuschlag
    Aug 23, 2013 at 12:32
  • 2
    I don't know where the practice lands in the chronology, but I've seen terminals use text spinners (using the \|/- characters) as well. I would imagine "replace last character" is a much easier animation than any other. This probably had a lot to do with the evolution of the spinner.
    – wersimmon
    Aug 27, 2013 at 22:27

8 Answers 8

Reset to default
11

Ideally, we'd always be able to give the user an estimate of the amount of time remaining. Visually, this is usually done through the infamous progress bar. However, certain activities such as waiting for a stream to buffer are difficult to estimate completion for. Most, if not all, progress bars have some sort of "indefinite" state available to programmers which give a candy-bar effect alerting the user, "I have no idea how long this will take." (I'm thinking specifically of Java Swing and Twitter Bootstrap, but I'm aware there are others.) However, seeing a progress bar that's not displaying progress is infuriating. "Why doesn't it just show me how much time is left?"

The spinner relieves some of this stress with a visual form that leads itself to cyclical animation. Rather than a bar that's expected to fill, the user sees a wheel and expects it to spin. (Reversing this relationship, you could also fill a circular form to display concrete progress.)

As another plus, spinners are easily recognizeable (thanks iPhone) and can be used at lower resolutions without losing their impact, allowing for more flexible UI design. For instance, some designs use action buttons that, when clicked, show a spinner right in the button to denote activity.

An interesting note is that, with good design, many items that typically use spinners could be modified to use progress bars instead. This would be more informative to the user. For instance, when loading a file over a network, the HTTP header often contains within it the size of the file. This could be used to estimate progress. My guess is that people tend towards spinners for their flexibility and their "modern" feel.

Improve this answer
1
  • I think this is the best answer so far, as it's really the only one that address the question "why spinning?"
    – LarsH
    Aug 22, 2013 at 18:18
15

This is the most compact and intuitive way to present an indefinite progress. The key word is indefinite.

enter image description here

source

I can hardly imagine an indefinite linear solution. For example, a common progress bar in indeterminate mode looks a bit unclear:

enter image description here

source

enter image description here

BTW, circle is a very useful shape (just want to make your day better :)

Round-robin - The term dates from the 17th Century French ruban rond (round ribbon). This described the practice of signatories to petitions against authority (usually Government officials petitioning the Crown) appending their names on a document in a non-hierarchical circle or ribbon pattern (and so disguising the order in which they have signed) so that none may be identified as a ringleader. This practice was adopted by sailors petitioning officers in the Royal Navy (first recorded 1731).

source

Improve this answer
4
  • By "endless" I suppose you mean "of indefinite amount"?
    – LarsH
    Aug 22, 2013 at 18:06
  • 1
    Why do we still have this concept of "indefinite progress reporting"? Does the user need to stare at a spinner at all, it just makes them impatient. Can't they just be told "go away, you will be notified when this process is complete"?. "Installing Windows Updates 1/34 ... Here's a game of minesweeper to pass the time" Or even better - "Contacting host, waiting for reply. Giving up in 30 seconds" with a progress bar to measure the timeout.
    – Piku
    Feb 22, 2014 at 10:15
  • Yes, you are right. Indefinite progress is a clear sign of poor application design.
    – Renat Gilmanov
    Feb 22, 2014 at 21:41
  • 1
    That's like saying that if it takes a long time for a web page to load you should always blame the programmer. The chain isn't stronger than the weakest link and to think that the developer can control all parts at every time is just plain ignorant.
    – Henrik Ekblom
    Jun 27, 2014 at 9:36
3

A spinner is compact, so easiest to implement in tight spaces. And because it's now common, it's a defacto standard for even large spaces.

But it's by no means universal either. Examples of alternatives:

  • Flicker's sliding dots
  • Google's 'folding' dot
  • Classic Mac (OS9)'s watch dial

(I would have shown the images but SE forbids animated GIFs.)

Improve this answer
1

Perhaps it's partly been forced due to the inflexibility of animation given by animated GIFs. When the use of Flash was prolific over the internet, loading screens were intricate and creative. (Well, some loading screens! Some were pretty dreadful) I do appreciate that the developer/designer had the filesize information and was therefore able to calculate the loading time. However, with the limits of animation and the current trend in minimal, simple and flat design, perhaps a simple spinning circle is the most aesthetically 'easy'.

I'd certainly like to see some other creative variants - and also some better UX on loading screens (like, if the page hangs and I get left with an infinite spinning ball, an option to restart would be nice if nothing else!).

Improve this answer
1
  • Note that with flash, it was often necessary to have an entire 'loading screen'. Spinners are often used for AJAX calls online these days, which is an entirely different interaction than waiting for an 1.5mb Flash file to load. ;)
    – DA01
    Aug 28, 2013 at 1:32
1

Well I feel, a process in computer language is nothing but repeatation of writing and reading of bytes 1 & 0, since its a repeated process, a cycle animation keeps the user informed that system is performing some repeated tasks at the background.

Well I guess technically there is not feedack given to roating GIF file to be alive, its just a representation of background process, hence even when its taking forever to complete a task, the visual sign is active and alive.

Instead I personally feel, OS should have feedback to the animated gif to behave and act while informing the user. Like initially it is Fast motion, since more task to do, intermediate its normal animating and lastly it slows and stops and fade of...

Improve this answer
0

The point of either is to give feedback to the user. Replacing the pointer in a 'wimp' environment is a clear way to do this and also tell the user they cannot interact with the areas they are over. When you have no mouse pointer then you use other techniques.

Improve this answer
2
  • Sorry, I didn't phrase the question correctly. I mean not only mouse cursors, but also entire loading screens.
    – jingtao
    Aug 22, 2013 at 14:45
  • Simple - for user feedback. Providing the user with feedback is vital. There is a lot of nuance in how and where you give the user feedback. The key is to only tell then the important stuff, especially if you are going to change focus for the user.
    – Stewart Dean
    Aug 22, 2013 at 14:52
0

The spinning indicates as you mentioned, a feedback to the user that the it is busy and working on loading/getting whatever that was requested.

To your own question, let me ask you this - How will you know that the computer is busy working on your request if it wasn't animated? You would just see a still image and assume it's frozen or hung in the process of getting the request (that's the feedback that humans perceive).

I see the spinning icon as a mode of continuous feedback that's given to the user in instances where you know your request can be processed in variable time. I hope I'm making sense! :)

Improve this answer
0

I wouldn't say that the rotating wheel would show progress... Because I have, on many occasions seen my computer sit there for 8 hours trying to copy a 5mb music file... And all I get is a loading spinny wheel thing... So I would rather see a bar that has stopped moving than a rotating wheel.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.