PhoenixPaper.Progress (PhoenixPaper v0.1.0)

Copy Markdown View Source

A Material progress indicator (pp_progress/1) — variant="linear" (MUI's LinearProgress) or variant="circular" (MUI's CircularProgress), combined into one component since they share the same value/color contract.

<.pp_progress value={72} />
<.pp_progress />
<.pp_progress variant="circular" value={72} />
<.pp_progress variant="circular" />

value nil (the default) renders the indeterminate/animated form — an unknown-duration loading state, the same distinction PhoenixPaper.Button's loading makes. Circular determinate is a real SVG arc (stroke-dasharray/ stroke-dashoffset computed from value — plain numeric style, not a Tailwind class, so the "no dynamic Tailwind classes" rule doesn't apply to it); circular indeterminate reuses the same bordered-circle animate-spin trick as Button's loading spinner instead of a second SVG, since an indeterminate ring doesn't need to represent a real percentage.

Summary

Functions

Renders a progress indicator. See the module doc.

Functions

pp_progress(assigns)

Renders a progress indicator. See the module doc.

Attributes

  • paperize (:boolean) - Defaults to true.
  • variant (:string) - Defaults to "linear". Must be one of "linear", or "circular".
  • value (:integer) - 0-100, nil for indeterminate (animated). Defaults to nil.
  • color (:string) - Defaults to "primary". Must be one of "primary", "secondary", "tertiary", or "error".
  • size (:integer) - circular only — diameter in pixels. Defaults to 40.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.