Loading

New

Animated loading indicators based on DaisyUI's .loading component. Supports multiple visual variants, sizes, and semantic colour tokens to match any context.

API Reference

Attribute	Description	Type	Default
`variant`	Visual style of the loading animation	string	`spinner`
`size`	Size of the loading indicator (`md` adds no extra class)	string	`md`
`color`	Colour applied via Tailwind text utility	string	`""`

variant

spinner dots ring ball bars infinity

size

xs sm md lg xl

color

primary secondary accent neutral info success warning error

ARIA role: the component renders a <span role="status"> which acts as a live region, announcing the loading state to screen readers without interrupting the current reading flow.

Descriptive label: add aria-label="Loading…" or pair with a visually-hidden <span class="sr-only"> when the context alone does not make the purpose clear.

Examples

Usage


<c-loading />

Variants

<c-loading variant="spinner" />
<c-loading variant="dots" />
<c-loading variant="ring" />
<c-loading variant="ball" />
<c-loading variant="bars" />
<c-loading variant="infinity" />

Sizes

<c-loading size="xs" />
<c-loading size="sm" />
<c-loading size="md" />
<c-loading size="lg" />
<c-loading size="xl" />

Colours

<c-loading color="primary" />
<c-loading color="success" />
<c-loading color="error" />

Inline Usage

<button class="btn btn-primary" disabled>
  <c-loading size="sm" />
  Saving…
</button>