11

Particularly prevalent since Windows Vista, as far as I can see, the 'loading circle' is now an oft-used representation of something being loaded, or some unspecified wait period.

Generic Loading Circle

There are many more examples on Google Images. I suppose Apple's age-old 'beach ball' is another example, and one that does use colour - also actually the only filled example of which I am aware.

OS X 'Beach Ball'

I'm curious as to the origins of this representation; when it replaced the progressively loading bar (which actually serves more purpose, since it shows distance to completion) as the primary (this is speculative of course, but I think I see more continuous circles than progressive bars these days, especially if you exclude Windows' installers).

I wonder how much analysis has been done user reaction to the representation, the directionality, gradient (often greyscale as above, but Vista was blue), etc.

|improve this question
  • 1
    See the meta discussion about whether origins questions are on or off topic. – Graham Herrli Nov 24 '13 at 3:21
  • 2
    I don't think it's correct to say that the spinner has "replaced the progressively loading bar". Spinners are generally used when the time until completion is unknown or when it is too brief to use a loading bar (<2 seconds). – Graham Herrli Nov 24 '13 at 3:27
  • 4
    Perfectly valid question. I also think this is related to the use of a sandclock that has declined over the last years. – kontur Nov 24 '13 at 9:16
  • @3nafish Of course - I did say in OP 'some unspecified wait period'. I said replaced in the context of 'replaced ... as the primary', that is most widely used. Progressive bars were once used for almost anything. Some would just start the bar again if it got to the end and the time was unknown. This doesn't seem so common now. – OJFord Nov 24 '13 at 15:29
  • @kontur thanks! Yes I'd forgotten about that timer actually! I think Windows stopped using it with Vista? The 'loading circle' would appear next to the pointer instead of the eggtimer. – OJFord Nov 24 '13 at 15:30
7

It's an updated version of waiting icons dating back to the first GUIs and browsers, which themselves are used to indicate either the system or application status.

Cursor icons to indicate system status

The Xerox Star workstation used an hourglass to indicate the machine is busy and unavailable for other activities. Changing the cursor was chosen to indicate the status of a GUI since users are almost always looking there. The trend of using the cursor to display system status continued to the Apple Macintosh, Microsoft Windows, and other operating systems you see today.

Browser-level indeterminate status

Browsers had different demands to indicate waiting since the user could interrupt the action of a page loading. One of the earliest uses of the "throbber" was the Mosaic browser where a graphic would animate continuously while a page was loading. Using an animated icon to indicate the downloading state was carried over into Netscape and Internet Explorer. When AJAX was introduced and parts of a page could be downloaded separately, it made sense for designers and developers to use an animated icon in the part of the page that was being downloaded.

Implications on UX

The important thing to remember is what you're trying to convey to the user, without limiting as much as the system as possible. In particular, if you can give the user an estimated completion then show a progress bar instead. See these additional Stack Overflow questions for some design implications and considerations.

|improve this answer
  • 1
    The earlier Apple Mac OS's used a sort of stopwatch clock thing as the 'working' cursor - which had (unsurprisingly) a clockwise rotation. I think Apple went over to Spinners with OS X – PhillipW Nov 25 '13 at 20:10
  • @PhillipW - Yes, Susan Kare was the original designer for the Apple Macintosh icon set that includes the stopwatch. She has them on display in her portfolio. – Jonathan Strate Nov 25 '13 at 20:17
  • Some fond memories there (one used to see a lot of the stopwatch as data loaded very slowly) Apart from the not so fond memory of the 'bomb' icon... – PhillipW Nov 26 '13 at 11:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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