The primary progress component.

Supports both normal <progress> HTML element as well as a radially designed variant (backed by <div>).

This will display as content of <progress> (or shown inside radial) the rounded percentage of the progress based on the value and the max defined.

If value is not given (or is nil) in radial mode then it'll be defaulted to 0 while in the non-radial mode will trigger the intermediate state which shows a progress bar animating.

Attributes

• value (:any) - The current value in the progress. Must be an integer, a floating number, or a string that can be parsed as an integer or a floating number.

  Caveats

  • If radial attribute is enabled this defaults to zero.
  • If radial is disabled this will trigger the intermediate state defined for the <progress> HTML element.

  Defaults to nil.

• max (:any) - The maximum value to use. Must be an integer, a floating number, or a string that can be parsed as an integer or a floating number.

  Defaults to 100.

• radial (:boolean) - Enables the radial view of the progress. Defaults to false.

• color (:string) - The style to use for the progress.

  Caveats

  If radial attribute is not enabled then the -content variants of Daisy' colors are all ignored/ineffective.

Must be one of "ghost", "neutral", "primary", "secondary", "accent", "info", "success", "warning", "error", "neutral-content", "primary-content", "secondary-content", "accent-content", "info-content", "success-content", "warning-content", or "error-content".

• class (:any) - Additional CSS classes to pass to the component. Defaults to nil.
• Global attributes are accepted.