Progress

A horizontal progress bar. Built on the native <progress> element with DaisyUI's progress class. Supports determinate values, indeterminate animation, all DaisyUI color tokens, and custom max.

Basic

Determinate bar at 70%. Default max is 100.

Indeterminate

Omit value for a looping animation — useful while waiting for an operation to complete.

Colors

All eight DaisyUI color tokens.

Values

Common percentage milestones.

Custom max

max defaults to 100 but can be any number — useful for task counts or byte totals.

With labels

Wrap the component with a label above and a value below.

Project roadmap

Real-world example: feature completion tracker inside a card.

Indeterminate colors

Indeterminate animation works with all color tokens too.