Skip to main content Red Hat Design System logo Contribute on Github


Overview Style Guidelines Code Accessibility


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
Example Token Description
16 --rh-space-lg 16px spacer

Interaction states

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

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