Spinner

Text-frame loading indicator with squared cli-spinners glyphs.

A standalone loading indicator that animates monospace text frames — ten squared/blocky glyph sequences embedded from cli-spinners (MIT) — instead of a drawn arc, so it matches the DS’s zero-radius terminal look. Announced via `role="status"` with a visually-hidden (or visible) label; the glyph itself is `aria-hidden`. Under `prefers-reduced-motion` a static first frame renders with no cycling.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Spinner } from 'dssoca';
</script>

<Spinner />
<Spinner variant="squareCorners" size="lg" />
<Spinner variant="pipe" label="Fetching services…" showLabel />

Frames and intervals come from sindresorhus/cli-spinners (MIT), embedded at build time — no runtime fetch or dependency. The glyph renders in `--ss-font-mono` at `--ss-spinner-font` (rescales across sm/md/lg) and is colored by `--ss-spinner-color`, which defaults to `--ss-primary`; the frame box reserves `1ch` so swaps never shift layout. `SPINNER_VARIANTS` / `SPINNER_VARIANT_NAMES` are exported for tooling. **Global default (DS-0108):** set the house spinner once via `applyDesignConfig({ spinnerVariant: 'pipe' })` (or the `spinner` axis in `dssocaConfig`); every Spinner with no `variant` prop then uses it. Unlike `theme`/`size`, `spinnerVariant` is a default-prop axis — not a CSS `data-*` attribute — and resolves through `resolveSpinnerVariant`.

Props

Prop	Type	Default	Description
`variant`	`'boxBounce2' \| 'boxBounce' \| 'squareCorners' \| 'toggle2' \| 'toggle3' \| 'toggle4' \| 'pipe' \| 'line' \| 'growVertical' \| 'growHorizontal'`	`config 'spinnerVariant' (boxBounce2)`	Which cli-spinners frame set to animate. When unset, falls back to the configured global `spinnerVariant` (precedence: prop > config > default); an explicit value always wins.
`label`	`string`	`'Loading'`	Accessible name announced via role="status".
`showLabel`	`boolean`	`false`	Render the label visibly next to the glyph (announced either way).
`speed`	`number`	—	Override the variant's frame interval (ms).
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`...rest`	`HTMLAttributes`	—	Any remaining native attributes are forwarded to the root span.