#Overview
A spinner is used for processing or loading content that is unpredictable.
We use an indeterminate spinner, which assures a user that a process is happening without specifying the amount of wait time.
See Loaders for further information about the types of loading states we use and general best practices.
#When to use
- Primary buttons
- Global search bar
- Dialogs
- Dynamic input fields
- Payment processing
#Don’t use for
- Loading a full page or parts of a page with a predictable layout (use a Skeleton)
- If you know the exact wait time (this is called determinate loading – accurately representing progress with a clear start and end)
#Anatomy
#Indicator and track
The indicator moves continuously around an invisible circular track in a clockwise direction.
- Track
- Indicator
#Color
The Galaxus spinner transitions between 5 of the primary Galaxus brand colours, which appear in the same order as the top bar in the header: brown, yellow, green, purple and blue.
The digitec spinner uses one color.
- Galaxus
- Digitec
#Size
- Small (16px)
- Medium (24px)
- Large (32px)
- Extra-large (64px): Used for full-screen states such as Payment processing (see example below).
#Best practices
#One is enough
Do
Use only one spinner on a page at one time.
Don't
Show progress on multiple granular activities.
#Placement
#Primary button
Any related buttons in the immediate area should also become disabled so that the user cannot click another action while the first action is still processing.
#Global search bar
Do
Use a spinner in the global search bar.
Don't
Use a spinner in the search filter because it does not process any data while typing.
#Dialog
Most images will use a skeleton. In this dialog example we use a spinner because we cannot predict the exact layout inside every dialog.
#Dynamic input fields
#Payment processing
Processing a user’s payment can create more than a 10-second delay. This requires a more focused loading state with sufficient feedback, so that the user is assured something is happening and won’t leave the page due to frustration.
Learn more about response-time limits in the article Website Response Times by Jakob Nielsen from NNgroup.
The extra-large spinner is accompanied by a heading label and optional description.
#App
The iOS and Android apps use a native Pull-to-Refresh spinner.
