Spinner

Indeterminate loader in three looks; sizes itself off the text it sits beside.

Inherits the line it sits on

size inherit draws at 1em, so it matches whatever text it sits beside; the named sizes are type tokens. thickness scales with the diameter.

Install Spinner

1. New project? One command installs the package and wires everything - see Installation:

pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

import { Spinner } from '@zyncat/ui/spinner';

1import { Spinner } from '@zyncat/ui/spinner';
2 
3<Spinner variant="dots" size="lg" />

Compose Spinner in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

Prop	Type	Default	Description
`size`	`SpinnerSize`	`'inherit'`	Diameter. `inherit` tracks the parent's font size at 1em, so a spinner beside a label always matches it; for any other size set `style={{ fontSize }}`.
`thickness`	`SpinnerThickness`	`'regular'`	Stroke weight, scaled to the diameter so it holds up at every size.
`variant`	`SpinnerVariant`	`'arc'`	Which loader to draw.
`label`	`string \| null`	`'Loading'`	What assistive tech announces. Pass `null` when something nearby already announces the wait - a button's `aria-busy`, an enclosing `role="status"` - and the spinner turns decorative rather than announcing it twice.
`delay`	`boolean`	`false`	Hold invisible for a beat before fading in, so work that finishes quickly never flashes a spinner.
`className`	`string`	—	Extra class(es) merged onto the root.
`style`	`CSSProperties`	—	Inline styles merged onto the root.