Anatomy
- Background: The background fill of the spinner
- Foreground: The part of the spinner that animates in a circle
Usage Guidelines
When to use this component
- Use the spinner for actions that last from 1 to 10 seconds.
When not to use this component
- For actions longer than 10 seconds, use a progress bar.
- If the action is shorter than 1 second, you don’t need a spinner.
Best Practices
Place the spinner where you want the user’s attention to be. It can be the middle of the container or a button, for instance.
Do not show a spinner when loading text content, for example: a list, or a paragraph. In those cases use a skeleton instead.
When using a spinner directly over content, reduce the container opacity to 20% to de-emphasize it and allow the spinner to be seen.
Do not show several spinners at a time to avoid a busy and motion-heavy interface. Show a single spinner over the container or use the skeleton instead.
Sizes
Known Gaps
- Additional accessibility guidelines