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


 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


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
Medium Text label size 16px
Large Text label size 18px


A spinner is available in both light and dark themes.

Light theme

 Light theme spinner

Dark theme

 Dark theme spinner



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


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


 Spacing between all spinner sizes and their text labels
Spacer Current value
16px spacer 16px

Interaction states

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

© 2021-2023 Red Hat, Inc. Deploys by Netlify