Spinner
@sushindustries/uiOne ring, one border, one turn - with a visually hidden label, because a spinner with nothing to announce is just an animation.
Composing it
SpinnerSpinnerOne ring, one border, one turn - with a visually hidden label, because a spinner with nothing to announce is just an animation.@sushindustries/ui · content is display: inline-block and sized in pixels through size, so
it drops into a line of text or beside a button label without needing a
container of its own - <Button disabled><Spinner size={14} />Saving</Button>
works with no extra markup.
Motion and reduced motion
The ring's turn is a CSS animation, and under prefers-reduced-motion: reduce it is replaced with a slower opacity pulse rather than removed
outright - unlike SkeletonSkeletonThe wait, drawn as the thing being waited for: a line, a block or a circle, shimmering unless motion is reduced.@sushindustries/ui · content, which just goes still. A spinner communicates
that something is happening right now, so it keeps some movement; it is the
sweep, not the motion itself, that reduced motion objects to.
When not to use it
Not a progress bar - there is no percentage prop and never will be, because a ring has no notion of "how far". Reach for ProgressProgressThe native progress element, restyled - omit value and the indeterminate state is real.@sushindustries/ui · content when there is a measurable amount left, and for SkeletonSkeletonThe wait, drawn as the thing being waited for: a line, a block or a circle, shimmering unless motion is reduced.@sushindustries/ui · content when the thing waited for is content that should stay silent rather than announce itself.