Holo Spinner

The <holo-spinner> component renders an indeterminate loading indicator with role="status" and a visually-hidden accessible label.

When to use

Use it for:

• A short, indeterminate wait on a small area: a button, a card, an inline refresh.
• Showing that the system is working when you cannot measure progress.

Don’t use it for:

• Measurable progress. Use Progress.
• Page or section placeholders that show layout. Use Skeleton.
• Waits longer than a few seconds without explanation. Add text, or use Progress.

Live Previews

Default

<holo-spinner></holo-spinner>

Custom label

<holo-spinner label="Saving changes…"></holo-spinner>

Accessibility

The host has role="status" (a polite live region) and renders a visible text label from the label prop (default “Loading…”). The rotating icon is aria-hidden. The spinner is not interactive. Rotation only runs when prefers-reduced-motion: no-preference; otherwise a static ring is shown.

You provide:

• A specific label when “Loading…” is not enough (“Loading orders”).
• Removal of the spinner when work ends, plus a clear message of the result.
• For a spinner that is present when the page first renders, remember live regions announce changes, not initial content. Set aria-busy on the region if needed.

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-spinner';

Properties

Property	Attribute	Type	Default	Description
label	label	string	'Loading…'	Accessible label announced by assistive technology while the spinner is visible. Rendered visually-hidden.

CSS custom properties

Property	Description
--holo-spinner-indicator-color	Color of the rotating indicator segment.
--holo-spinner-size	Width and height of the spinner.
--holo-spinner-thickness	Stroke width of the spinner ring.
--holo-spinner-track-color	Color of the spinner track.