Why are spinning animations typically used for loading sequences?

Question

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?

Answer 1

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.

Answer 2

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

source

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

source

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

Answer 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.)

Answer 4

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!).

Answer 5

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! :)

Answer 6

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.

Answer 7

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...

Answer 8

Spinning animations are a go-to for loading sequences because they visually represent that something is in progress, which helps set the right expectation for users. The circular motion also subtly suggests continuity and endless possibilities—kind of like how the process is still ongoing, not stuck.

Answer 9

I think it's simply the simplest solution for the following requirements:

1. It shows that the software is working and the computer hasn't crashed.
2. It works with tight spaces, low resolutions, slow hardware, limited colors...
3. It's universal (e.g. a mail program may have an animation of a letter flying back and forth, but you cannot use that for a streaming service, obviously)
4. It's indefinite, aka can be looped for ever and ever (progress estimation can be hard)

Answer 10

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.