PUI.Progress (pui v1.0.0)

Copy Markdown

An accessible progress bar for completion and loading states.

The component renders a progressbar role with configurable bounds and accessible labels. The host application owns the value and can update it through ordinary LiveView assigns.

Examples

<.progress value={42} label="Upload progress" />
<.progress value={3} min={0} max={10} value_text="3 of 10 items" />
<.progress value={75} class="h-3" />

Attributes

NameTypeDefaultDescription
minfloat0.0Minimum progress value
maxfloat100.0Maximum progress value
valuefloat0.0Current progress value
labelstringnilAccessible label for the progressbar
aria_labelledbystringnilID of an element labelling the progressbar
value_textstringnilHuman-readable value announced by screen readers
classstring""Additional CSS classes

Summary

Functions

progress(assigns)

Attributes

  • min (:float) - Defaults to 0.0.
  • max (:float) - Defaults to 100.0.
  • value (:float) - Defaults to 0.0.
  • label (:string) - Defaults to nil.
  • aria_labelledby (:string) - Defaults to nil.
  • value_text (:string) - Defaults to nil.
  • class (:string) - Defaults to "".