Progress Bars

Progress bars are used to indicate the progress of a process.

Basic Bars

Progress bars utilize the value and max attributes to set the progress and can have various colors. By default, they take up the full width of their parent container.

  • value defaults to nil if not provided (for indeterminate bars)
  • max defaults to 100 if not provided to mimic percentages
Preview
Code
.flex.flex-col.gap-4.w-56
  = daisy_progress(value: 25)
  = daisy_progress(css: "progress-primary", value: 50, max: 100)
  = daisy_progress(css: "progress-secondary", value: 75, max: 100)
  = daisy_progress(css: "progress-accent", value: 100, max: 100)

Indeterminate Bars

Indeterminate progress bars are used when the progress is unknown. They animate to indicate that a process is currently happening.

Preview
Code
.flex.flex-col.gap-4.w-56
  = daisy_progress(css: "progress-info")
  = daisy_progress(css: "progress-success [animation-delay:250ms]!")
  = daisy_progress(css: "progress-warning [animation-delay:500ms]!")
  = daisy_progress(css: "progress-error [animation-delay:750ms]!")
Made with by Profoundry .
Copyright © 2023-2026 Profoundry LLC.
All rights reserved.