Progress indicators.
A port of the Pines progress bar, plus circular and stepped variants. All three are pure Tailwind and SVG — no Alpine, no JavaScript.
<.progress value={64} />
<.progress_circle value={64} show_value />
<.progress_steps steps={~w(Cart Shipping Payment)} current={1} />Summary
Feedback
Renders a horizontal progress bar.
Renders a circular progress ring.
Renders a horizontal stepper.
Feedback
Renders a horizontal progress bar.
Accessibility
Carries role="progressbar" with aria-valuenow, aria-valuemin and aria-valuemax.
An indeterminate bar omits aria-valuenow, which is how assistive technology is told the
progress is unknown rather than zero.
Attributes
value(:integer) (required)max(:integer) - Defaults to100.label(:string) - Defaults tonil.show_value(:boolean) - Displays the percentage. Defaults tofalse.size(:string) - Defaults to"md". Must be one of"sm","md", or"lg".variant(:string) - Defaults to"default". Must be one of"default","success","warning", or"danger".indeterminate(:boolean) - Animates continuously; ignoresvalue. Defaults tofalse.class(:string) - Defaults tonil.bar_class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a circular progress ring.
The arc is drawn with stroke-dasharray/stroke-dashoffset on an SVG circle, so it scales
cleanly and needs no JavaScript.
Attributes
value(:integer) (required)max(:integer) - Defaults to100.size(:integer) - Diameter in pixels. Defaults to96.stroke(:integer) - Ring thickness in pixels. Defaults to8.variant(:string) - Defaults to"default". Must be one of"default","success","warning", or"danger".show_value(:boolean) - Defaults tofalse.label(:string) - Defaults tonil.class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a horizontal stepper.
Completed steps carry a tick; the active step is marked aria-current="step".
Attributes
steps(:list) (required) - A list of step labels.current(:integer) - Zero-based index of the active step. Defaults to0.class(:string) - Defaults tonil.- Global attributes are accepted.