Docs / Components
SenseSpinnerComponent
Indeterminate loading indicator from @artificialsenselabs/ui. Prefer for compact local busy; use sense-progress-bar when percent is known or a linear track fits.
Live demo: run nx serve showcase and open /components/spinner (port 4202).
Overview
Category: Feedback. Selector: sense-spinner. Import: import { SenseSpinnerComponent } from '@artificialsenselabs/ui';
ADR-0030 exempt — no surface chrome. Standalone announces; nest with aria-hidden when a parent owns busy.
<sense-spinner size="sm" ariaLabel="Saving changes" />API
Generated from libs/ui/src/lib/spinner/sense-spinner/sense-spinner.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
size | SenseSpinnerSize | 'md' | Visual scale: `sm` | `md` | `lg`. Default `md`. |
strokeWidth | number | 2 | SVG circle stroke width in user units. Default `2`. |
ariaLabel | string | null | null | Accessible name override; falls back to `spinner.label` i18n bundle. |
Accessibility
- Host exposes
role="status"and an accessible name (ariaLabelor i18n). - SVG is decorative (
aria-hidden="true",focusable="false"). - Put
aria-busyon the loading region/control — not on the spinner. Composed hosts (sense-button,sense-select,sense-block-ui) hide the glyph. - Reduced motion keeps a static muted arc instead of a frozen mid-animation ring.