Spinners#
Spinners indicate ongoing progress on an action or operation.
When to Use#
Progress needs to be indicated whenever an operation takes more than around three seconds. This communicates that the operation is taking place and that an error hasn’t occurred. If an operation takes less than three seconds, it isn’t necessary to indicate progress.
Spinners do not display the proportion of the task that has been completed, or the time remaining. They are therefore better-suited to shorter operations. If the task is likely to take more than 30 seconds, a progress bar might be a better choice.
General Guidelines#
It is better not to show spinners for very short periods of time, since briefly displayed animated elements distract from the overall user experience. If an operation can vary in how long it takes, consider only showing the spinner after a period of time has elapsed.
Place progress spinners close to or within the user interface elements they relate to.
Generally, only one progress spinner should be displayed at once. Avoid showing numerous spinners simultaneously.
A label can be shown next to a spinner, if it is helpful to clarify the task which a spinner relates to.
If a spinner is displayed for a relatively long time, a label can be added to indicate progress. This can take the form of a percentage, an indication of the time remaining, or progress through sub-components of the task (for example, items downloaded or pages exported).