Progress

Visual indicators for task progress and completion

Basic

Basic Progress

Preview Code Auto

Progress(value="0", max="100", cls="progress w-56"),
Progress(value="10", max="100", cls="progress w-56"),
Progress(value="40", max="100", cls="progress w-56"),
Progress(value="70", max="100", cls="progress w-56"),
Progress(value="100", max="100", cls="progress w-56"),

Indeterminate

Progress bar without specific value

Preview Code Auto

Progress(cls='progress w-56')

Colors

Primary Colors

Preview Code Auto

Progress(value='0', max='100', cls='progress progress-primary w-56'),
Progress(value='10', max='100', cls='progress progress-primary w-56'),
Progress(value='40', max='100', cls='progress progress-primary w-56'),
Progress(value='70', max='100', cls='progress progress-primary w-56'),
Progress(value='100', max='100', cls='progress progress-primary w-56')

Secondary Colors

Preview Code Auto

Progress(value='0', max='100', cls='progress progress-secondary w-56'),
Progress(value='10', max='100', cls='progress progress-secondary w-56'),
Progress(value='40', max='100', cls='progress progress-secondary w-56'),
Progress(value='70', max='100', cls='progress progress-secondary w-56'),
Progress(value='100', max='100', cls='progress progress-secondary w-56')

Accent Colors

Preview Code Auto

Progress(value='0', max='100', cls='progress progress-accent w-56'),
Progress(value='10', max='100', cls='progress progress-accent w-56'),
Progress(value='40', max='100', cls='progress progress-accent w-56'),
Progress(value='70', max='100', cls='progress progress-accent w-56'),
Progress(value='100', max='100', cls='progress progress-accent w-56')

Success Colors

Preview Code Auto

Progress(value='0', max='100', cls='progress progress-success w-56'),
Progress(value='10', max='100', cls='progress progress-success w-56'),
Progress(value='40', max='100', cls='progress progress-success w-56'),
Progress(value='70', max='100', cls='progress progress-success w-56'),
Progress(value='100', max='100', cls='progress progress-success w-56')

Info Colors

Preview Code Auto

Progress(value='0', max='100', cls='progress progress-info w-56'),
Progress(value='10', max='100', cls='progress progress-info w-56'),
Progress(value='40', max='100', cls='progress progress-info w-56'),
Progress(value='70', max='100', cls='progress progress-info w-56'),
Progress(value='100', max='100', cls='progress progress-info w-56')

Warning Colors

Preview Code Auto

Progress(value='0', max='100', cls='progress progress-warning w-56'),
Progress(value='10', max='100', cls='progress progress-warning w-56'),
Progress(value='40', max='100', cls='progress progress-warning w-56'),
Progress(value='70', max='100', cls='progress progress-warning w-56'),
Progress(value='100', max='100', cls='progress progress-warning w-56')

Error Colors

Preview Code Auto

Progress(value='0', max='100', cls='progress progress-error w-56'),
Progress(value='10', max='100', cls='progress progress-error w-56'),
Progress(value='40', max='100', cls='progress progress-error w-56'),
Progress(value='70', max='100', cls='progress progress-error w-56'),
Progress(value='100', max='100', cls='progress progress-error w-56')

Class Reference

Class	Type	Description
progress	Component	Base progress component
progress-primary	Color	Primary color
progress-secondary	Color	Secondary color
progress-neutral	Color	Neutral color
progress-accent	Color	Accent color
progress-info	Color	Info color
progress-success	Color	Success color
progress-warning	Color	Warning color
progress-error	Color	Error color

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo