@f-ewald/components

Documentation / loading-dots

Component API

<loading-dots>

Open live example

Three dots that bounce one after another as a lightweight, indeterminate
"working" / "typing" indicator. Purely presentational and property-driven —
show it while a short operation is pending and remove it when done.

Exposes an accessible role="status" with label as its name, so assistive
technology announces the loading state; the dots themselves are decorative.
Under prefers-reduced-motion the bounce is removed and the dots rest.

Install

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

Usage

<loading-dots></loading-dots>
<loading-dots size="sm"></loading-dots>
<loading-dots size="lg" label="Sending message"></loading-dots>

Attributes / properties

PropertyAttributeTypeDefaultDescription
sizesize"sm" | "md" | "lg""md"Dot-size step — sm, md (default), or lg.
labellabelstring"Loading"Accessible name announced by the role="status" live region.

Events

None.

Slots

None.

CSS custom properties

Custom property
--ui-line-height-glyph
--ui-primary
--ui-radius-pill