Spinner <l-spinner>

Spinners are used to indicate an indeterminate loading state. Commonly used inside buttons, forms, or content areas while waiting for an asynchronous operation to complete.

HTML tag<l-spinner>

⏣Native HTML

⬡Progressive

◇Custom

⬢Shadow DOM

Custom Element · Shadow DOM

Options

Code

HTML

<l-spinner class="text-4xl"></l-spinner>

Sizes

Size scales with font-size since --size defaults to 1em.

Code

HTML

<l-spinner class="text-base"></l-spinner>
<l-spinner class="text-2xl"></l-spinner>
<l-spinner class="text-4xl"></l-spinner>
<l-spinner class="text-6xl"></l-spinner>

Custom colors

Override --indicator-color.

Code

HTML

<l-spinner class="text-4xl [--indicator-color:var(--color-blue-500)]"></l-spinner>
<l-spinner class="text-4xl [--indicator-color:var(--color-green-500)]"></l-spinner>
<l-spinner class="text-4xl [--indicator-color:var(--color-purple-500)]"></l-spinner>

Accessibility

Criteria

Role

Uses role="progressbar" to communicate loading state

WCAG4.1.2

RGAA7.1

Accessible name

Default aria-label="Loading" provides accessible name

WCAG1.1.1

RGAA1.1

Color

Indicator color must meet non-text contrast ratio against its background

WCAG1.4.11

API reference

Importing

JS

import 'luxen-ui/spinner';

CSS custom properties

--sizeName

The size of the spinner (width and height). Defaults to 1em

--indicator-colorName

The color of the spinner

--speedName

The duration of one full spin cycle