Anatomy
- Indicator: The visual element that communicates an ongoing process.
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
Platforms
Spinner uses a native visuals that are defined per platform
Known Gaps
- Additional accessibility guidelines