Spinner
Announced indeterminate progress with size and semantic color axes.
Contract
| Axis | Values | Default |
|---|---|---|
uiSize | md, lg | md |
variant | current, muted, primary, danger | current |
label | accessible status text | Loading |
decorative | true, false | false |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/spinner.css';Scroll inside the code area to read long lines.
Imports
import { TRSpinner } from '@tinyrack/ui/components/spinner';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Sizes permalink
Match the spinner size to nearby text or controls.
Color variants permalink
Use current to inherit surrounding text, muted for low emphasis, primary for active work, and danger for a failing task.
Standalone status or control decoration permalink
A standalone TRSpinner owns the status. A named TRButton owns its loading state and hides the nested spinner. Rotation stops under reduced motion.
Task lifecycle permalink
Start, finish, and reset the task to verify that the announced status only exists while work is running.
API
By default TRSpinner exposes role="status"; use a non-empty, task-specific label. Blank labels fall back to Loading. Set decorative inside an already named loading control or status region so only one element is announced. Mount the spinner only while work is pending, put aria-busy="true" on the region being updated when appropriate, and announce completion from that region. Rotation stops when the user requests reduced motion.
| CSS token | Default | Purpose |
|---|---|---|
--tr-spinner-size | size recipe | Indicator diameter |
--tr-spinner-stroke-width | --tinyrack-spinner-stroke-width | Ring thickness |
--tr-spinner-color | semantic variant color | Active and track color |
--tinyrack-spinner-size-md | foundation metric | Small diameter |
--tinyrack-spinner-size-md | foundation metric | Medium diameter |
--tinyrack-spinner-size-lg | foundation metric | Large diameter |
--tinyrack-spinner-track-opacity | foundation metric | Inactive ring opacity |