LanternUI.Components.Progress (LanternUI v0.8.2)

Copy Markdown View Source

Progress bar or completion ring. Pure server-render + CSS.

<.progress value={40} />
<.progress indeterminate label="Loading" />
<.progress shape="ring" value={7} max={19} label="Completion">7 / 19</.progress>
<.progress shape="ring" completed={7} scope={19} />

Summary

Functions

progress(assigns)

Functions

progress(assigns)

Attributes

  • shape (:string) - bar is a track fill; ring is the SVG completion circle. Defaults to "bar". Must be one of "bar", or "ring".

  • value (:integer) - Bar: percent 0–100 (nil is indeterminate). Ring: completed amount. Defaults to nil.

  • max (:integer) - Ring total. Defaults to 100 when only value is set. Ignored on bars. Defaults to nil.

  • completed (:integer) - Flicker alias of ring value; used with scope. Defaults to nil.

  • scope (:integer) - Flicker alias of ring max. Defaults to nil.

  • indeterminate (:boolean) - Force indeterminate bar (also true when bar value is nil). Defaults to false.

  • size (:string) - Bar track height, or ring diameter (sm 28px, md 40px, lg 48px). Defaults to "md". Must be one of "sm", "md", or "lg".

  • color (:string) - Semantic fill / stroke color token. Defaults to "accent". Must be one of "primary", "accent", "success", "warning", "danger", "info", or "neutral".

  • shimmer (:boolean) - Animated sheen on the determinate bar fill (e.g. active upload). Defaults to false.

  • label (:string) - Accessible name. Bars use "Progress" when omitted. A ring without a label or caption is decorative (aria-hidden).

    Defaults to nil.

  • class (:any) - Extra classes merged onto the root element. Defaults to nil.

  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_block - Optional caption beside a ring (counts, short copy).