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
Avoid using for full page load or major page layout changes. Use Skeletons instead.
Visual style
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”