Spinner
An animated element used to indicate that an action has been received or communicate the loading state for content that cannot be represented by Skeletons.
Page sections
Type
Default
Usage
Use Spinner to notify users that their action or input is being processed
Use for inline content loading state
Use for content loading state in Modals and cases where the page layout isn't substantially changing
Avoid using for full page load or major page layout changes. Use Skeletons instead.
Visual style
Avoid changing the color of the spinner
Avoid resizing the spinner
Accessibility
Characteristics
- Appears when application is busy processing data or loading new data
- Spinner should be large enough to be seen and contrast well with the background
Keyboard/focus expectations
- Focus should shift to the spinner so that screen magnification users will know something is going on
Screen reader expectations
- Application; busy, loading data, or processing, is announced. Ex. “Loading data”