Spinner

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Style
  2. Sizes
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states
  1. Style
  2. Sizes
  3. Theme
  4. Configuration
  5. Space
  6. Interaction states

Style

A spinner is an animated line segment that follows a track and may include an optional text label.

Anatomy

Anatomy of a spinner with annotations; number 1 is pointing to the track, number 2 is pointing to the indicator, and number 3 is pointing to the optional text label
  1. Track
  2. Indicator
  3. Optional text label

Sizes

A spinner comes in large, medium, and small sizes. Each size includes an optional text label on the bottom.

Small size, medium size, and large size spinners with their text labels below
Size Element Current value
Small Text label size 14px
0.875rem
Medium Text label size 16px
1.0rem
Large Text label size 18px
1.125rem

Theme

A spinner is available in both light and dark themes.

Light theme

Light theme spinner

Dark theme

Dark theme spinner

Configuration

Container

A spinner is centered horizontally and vertically within a container and the viewport by default. This demonstrates that the whole container is loading rather than one specific area.

Diagram of how a spinner should be horizontally and vertically centered within a container no matter its size or if a text label is included or not

Button

If a small size spinner is used within a button, it can be positioned to the left of the text as if it were an icon.

Button with a small size spinner icon to the left as if it were an icon

Space

Spacing between all spinner sizes and their text labels

Interaction states

A spinner is intentionally not operable or navigable and has no interaction states.

Edit this page on GitHub