Progress renders a native <progress> element styled to match the daisyUI palette. Use it for file uploads, form wizard steps, or any operation where percentage completion should be visible.
Basic Progress
<div class="flex flex-col gap-2 w-56">
<c-lb.progress value="0" />
<c-lb.progress value="25" />
<c-lb.progress value="50" />
<c-lb.progress value="75" />
<c-lb.progress value="100" />
</div>
Color Variants
<div class="flex flex-col gap-2 w-56">
<c-lb.progress variant="primary" value="40" />
<c-lb.progress variant="secondary" value="50" />
<c-lb.progress variant="accent" value="60" />
<c-lb.progress variant="info" value="70" />
<c-lb.progress variant="success" value="80" />
<c-lb.progress variant="warning" value="90" />
<c-lb.progress variant="error" value="45" />
</div>
Indeterminate
<c-lb.progress class="w-56" />
API Reference
c-lb.progress
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Progress bar color variant |
| value | string | - | No | Current progress value (0-100). Omit for indeterminate. |
| max | string |
100
|
No | Maximum progress value |