Spinners are used as indeterminate progress indicators to show the user that there are processes happening in the background.
- Indicating to the user that loading is occurring in the background.
- Loading times are indeterminate.
Don’t use when
- A loading scenario needs to indicate progress, usually with particularly long load times. Use a dynamically updating Progress Bar instead.
- A main loading state is needed, such as an app initialization. In this case, forego our simple spinner, and opt to use a custom, branded one instead.
- A spinner should usually be centered within its container unless inside of another element like a button.
- A spinner spins indefinitely until loading is complete.
- Each spinner should include
role="status"and a nested
Was this page helpful?
Thanks for your feedback!