Spinner

Status: Available View in Storybook

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.

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”
↑ Back to top