Spinner

Usage

• Use Spinner to indicate a short background process is running, such as submitting a form or loading data.
• Place within content areas (panels, pages, modals) centered until data loads, or inline next to the content expected to load.
• Use Spinner when the loading area's layout is unknown or unpredictable. Use Skeleton instead when reserving space for data in predictable layouts such as cards or tables.
• Nest Spinner inside a Blanket to create a loading modal.

Appearance

• Color (color) — sets the spinner icon color using a semantic text color token. Defaults to "base". Accepted values: "base", "bold", "subtle", "accent", "success", "caution", "critical", "information", "feature", "disabled".
• Use color only to convey semantic meaning. Never change color to match a color scheme or theme.

Behaviors

• Reduced motion — when the user's OS enables reduced motion, the rotating animation automatically replaces with a static dotted circle. No prop controls this; it is handled via CSS.

Content

• Enable label text (shouldShowLoadingText) only when the Spinner has no other surrounding context to describe the loading state.
• Keep labels to single words or short phrases.
• Omit the label when context is clear, or when the Spinner is used within a button or near another status indicator.

Implementation Notes

• Spinner extends Box — all Box layout props (as, spacing, etc.) are available.
• Label visibility requires two props together: set shouldShowLoadingText to true and provide a label string. The label is hidden when shouldShowLoadingText is false (default) or label is empty.
• label defaults to "Loading…" when omitted.
• Spinner has no size prop. Override size via the spinnerSize CSS variable exported from spinner.style-exports.ts.
• React: <Spinner color="accent" shouldShowLoadingText label="Saving…" />.
• Ember: <PlumaSpinner @color="accent" @shouldShowLoadingText={{true}} @label="Saving…" />.