@f-ewald/components

Documentation / loading-spinner

Component API

<loading-spinner>

Open live example

Indeterminate circular loading spinner: a rotating arc over a faint track,
in the style of a browser page-load indicator. Purely presentational and
property-driven — show it while work is in flight and remove it when done.

Exposes an accessible role="status" with label as its name, so assistive
technology announces the loading state; the arc itself is decorative. Under
prefers-reduced-motion it stops rotating and stays a static ring.

Install

import "@f-ewald/components/loading-spinner.js";

Usage

<loading-spinner></loading-spinner>
<loading-spinner size="sm"></loading-spinner>
<loading-spinner size="lg" label="Loading results"></loading-spinner>

Attributes / properties

PropertyAttributeTypeDefaultDescription
sizesize"sm" | "md" | "lg""md"Diameter step — sm ≈ 1rem, md ≈ 1.5rem (default), lg ≈ 2rem.
labellabelstring"Loading"Accessible name announced by the role="status" live region.

Events

None.

Slots

None.

CSS custom properties

Custom property
--ui-border
--ui-line-height-glyph
--ui-primary