Docs / Components
SenseSpinnerComponent
Indeterminate loading indicator from @artificialsenselabs/ui for inline and page-level busy states.
Live demo: run nx serve showcase and open /components/spinner (port 4202).
Overview
Category: Feedback. Selector: sense-spinner. Import: import { SenseSpinnerComponent } from '@artificialsenselabs/ui';
<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`. |
animationDuration | string | '1.5s' | CSS animation duration for rotate and dash keyframes. Default `1.5s`. |
ariaLabel | string | null | null | Accessible name override; falls back to `spinner.label` i18n bundle. |
Accessibility
- Host exposes
role="status"andaria-busy="true". - SVG is decorative (
aria-hidden="true",focusable="false"). - Override
ariaLabelwhen context is more specific than the default "Loading". - Animations pause under
prefers-reduced-motion: reduce.