Loading renders a daisyUI spinner with type variants (spinner, dots, ring, ball, bars, infinity) and size variants. Use it inside buttons, overlays, or placeholder areas while async content loads.
Animation Types
<div class="flex flex-wrap items-center gap-4">
<c-lb.loading type="spinner" />
<c-lb.loading type="dots" />
<c-lb.loading type="ring" />
<c-lb.loading type="ball" />
<c-lb.loading type="bars" />
<c-lb.loading type="infinity" />
</div>
Sizes
<div class="flex flex-wrap items-center gap-4">
<c-lb.loading type="spinner" size="xs" />
<c-lb.loading type="spinner" size="sm" />
<c-lb.loading type="spinner" size="md" />
<c-lb.loading type="spinner" size="lg" />
<c-lb.loading type="spinner" size="xl" />
</div>
Color Variants
<div class="flex flex-wrap items-center gap-4">
<c-lb.loading type="spinner" variant="primary" size="lg" />
<c-lb.loading type="spinner" variant="secondary" size="lg" />
<c-lb.loading type="spinner" variant="accent" size="lg" />
<c-lb.loading type="spinner" variant="info" size="lg" />
<c-lb.loading type="spinner" variant="success" size="lg" />
<c-lb.loading type="spinner" variant="warning" size="lg" />
<c-lb.loading type="spinner" variant="error" size="lg" />
</div>
API Reference
c-lb.loading
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| type |
spinner
dots
ring
ball
bars
infinity
|
spinner
|
No | Loading animation type |
| size |
xs
sm
md
lg
xl
|
md
|
No | Loading indicator size |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Loading color variant |