LanternUI.Components.ProgressRing (LanternUI v0.8.1)

Copy Markdown View Source

SVG completion ring with a visible muted track and a thicker progress stroke.

The flicker original used the same stroke width for track and value, and a track colour that disappeared on the page background — 7/19 read as an empty circle. Here the track is --lantern-border-strong and the value stroke is thicker, so partial progress is obvious.

<.progress_ring value={7} max={19} />
<.progress_ring completed={7} scope={19}>
  7 / 19
</.progress_ring>

value/max is the generic API. completed/scope is the flicker-shaped alias so a consuming page does not have to remap.

Summary

Functions

progress_ring(assigns)

Functions

progress_ring(assigns)

Attributes

  • value (:integer) - Completed amount. Ignored when scope is set. Defaults to nil.
  • max (:integer) - Total amount. Defaults to 100 when only value is set. Defaults to nil.
  • completed (:integer) - Flicker alias of value; used with scope. Defaults to nil.
  • scope (:integer) - Flicker alias of max. Defaults to nil.
  • size (:string) - sm is 28px; md is 40px. Defaults to "md". Must be one of "sm", or "md".
  • color (:string) - Semantic colour of the progress stroke. Defaults to "success". Must be one of "success", "accent", "primary", "danger", "warning", or "info".
  • label (:string) - Accessible name. Decorative (aria-hidden) when omitted and no inner slot. 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 the ring (counts, short copy).