Use for short async operations with unknown duration.
Spinner
Compact loading indicator for pending async operations.
- .source-spinner Root svg element
- .source-spinner-track Low-contrast full circle
- .source-spinner-head Animated stroke segment
- [data-source-size] Size modifier
States
StateAppearance
DefaultNeutral spinner color and medium size.
PaletteSemantic color override by palette.
Sizexs, sm, md, lg dimensions.
Design intent
Spinner communicates that something is in progress without quantifying it. Use it for operations that typically resolve in under a few seconds. For longer waits, add a text label describing what is loading. For operations where the user needs to know overall progress, use a progress indicator instead.
When to use
Do
Pair with concise loading text when waits may exceed a few seconds.
Disable the triggering action while loading is active.
Don't
Loop a spinner indefinitely without context.
Use spinner as the only feedback for failure states.
Use spinner when measurable progress should be shown.
Label
Set label to describe what is loading. Default label is “Loading”.
Designer checklist
- Spinner always has an accessible text label describing what is loading.
- The associated action (button, form) is disabled while the spinner is active.
- For waits longer than 5 seconds, supplementary text gives a sense of progress.
Spinner props
PropTypeDefaultDescription
sizexs | sm | md | lgmdSpinner dimension.
paletteneutral | accent | success | warning | danger | infoneutralSpinner color palette.
labelstringLoadingAccessible status label.
Basic usage
import { Spinner } from '@pierredelattre/source-react';
<Spinner />Inline usage
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
<Spinner size="sm" palette="accent" label="Saving changes" />
<span>Saving...</span>
</div>Component tokens
TokenDefault
--source-spinner-size1.5rem
--source-spinner-color--source-color-text-label
--source-spinner-speed0.75s
ARIA attributes
AttributePurpose
role="status"Announces status region semantics.
aria-labelConveys loading meaning to assistive tech.