Progress Bars

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

Basic Bars

Progress bars utilize value and a 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 .