Spinner
Loading spinner components for indicating ongoing processes and operations.
Variants
Three spinners for different surfaces. Each takes a size in pixels.
Blue spinner
BlueSpinner is a blue arc for primary loading states.
Gray spinner
GraySpinner is a ring of bars in the current text color.
Gray spinner 2
GraySpinner2 is a compact ring with a gradient head, used in most loading affordances.
In context
Pair a spinner with a short status line that says what is loading.
Accessible label
Spinners are hidden from assistive technology by default. Pass label when the spinner is the only sign that something is loading. The spinner then renders with role="status" and the label as its accessible name.
Centered
CenteredSpinner centers a GraySpinner2 in an area whose content has not rendered yet. It fills the parent's width and height, with a minimum height of 160px. Pass flex-1 to fill a flex parent, or min-h-0 when the parent sizes itself.
Properties
Blue colored spinner component
Gray colored spinner component
Compact gradient spinner component
GraySpinner2 centered in a full-width box with a 160px minimum height
Size of the spinner in pixels
Default: 16
Additional CSS classes to apply to the spinner. On CenteredSpinner, applies to the wrapper.
Accessible name. When set, the spinner renders with the status role. When omitted, it is hidden from assistive technology.
Alias for label. label wins when both are set.
Inline styles for GraySpinner2 (e.g. to sync animation timing)
Ref forwarded to the GraySpinner2 SVG element