A spinner is a simple animated element that tells users that either saving or loading of information/data is in progress and is tied to user-triggered actions. In some cases of saving information the UI will reflect the change before the change is actually saved. In such cases, the spinner should be used to indicate background activity until information is successfully saved.
Spinners attract attention because of their animation so they should be used sparingly. Ideally, only one spinner should be used at a time. Skeleton loader should be used for indicating the loading of whole pages, spinners should be used on a small scale for small changes in the UI.
Spinners shouldn’t be used in combination with the skeleton loader, too much animation at once can be overwhelming. Either one or the other should be used.
Additionally, we add a 100 ms delay before showing the spinner to mitigate lots of unnecessary spinners showing up at the same time.
We use three spinner sizes:
- Small: 16 pixels
- Medium: 32 pixels
- Large: 64 pixels
and three spinner colors:
- Light: white
Todo: Add live component block with code example (all spinner sizes and colors — example)
With its size at 16 pixels this spinner size is perfect for placing it alongside text labels. This is also the size that can be used inside other elements such as buttons or input fields.
This size can be used for indicating that loading is in progress for larger components (for example charts and other interactive elements).
This size is the largest we allow for our spinners. It can be used for indicating that loading is in progress for content areas and sections of the UI.
This is the primary color for the spinner and it should be used in most cases.
This is the secondary color for the spinner. It’s a great alternative for times when the spinner doesn’t need to stand out as much (background activity for example).
This color is reserved for spinners on dark background only (buttons for example).
Color, spacing, dimension, and layout specific information pertaining to this component can be viewed using the following link:Sketch Measure Preview for search patterns