PhiaUi.Components.CircularProgress (phia_ui v0.1.17)

Radial/circular progress indicator rendered as an SVG arc.

A pure SVG component — no JavaScript required. Commonly used in dashboards, KPI cards, profile completion widgets, and performance gauges.

Anatomy

Element	Role
Root `<div>`	Accessible container with ARIA progressbar role
`<svg>`	Scaled SVG viewport, rotated -90° so arc starts at top
Track `<circle>`	Full-circumference muted background ring
Arc `<circle>`	Partial arc conveying the progress value
Center label	Percentage or custom slot content

How the arc works

The arc uses stroke-dasharray set to the full circumference (≈ 263.89 for radius 42) and stroke-dashoffset to reveal only the appropriate portion:

offset = circumference - (value / 100) × circumference

At value=0 the offset equals the full circumference (arc hidden). At value=100 the offset is 0.0 (full arc visible).

Examples

<%!-- Basic usage --%>
<.circular_progress value={72} />

<%!-- Custom size and color --%>
<.circular_progress value={48} size="lg" color="stroke-green-500" />

<%!-- Custom center label via slot --%>
<.circular_progress value={90}>
  <:label>
    <span class="text-xs font-semibold text-green-600">Done</span>
  </:label>
</.circular_progress>

<%!-- Thicker ring, no text --%>
<.circular_progress value={33} thickness={12} show_label={false} />

Summary

Functions

circular_progress(assigns)

Renders a circular/radial progress indicator.

Functions

circular_progress(assigns)

Renders a circular/radial progress indicator.

Example

<.circular_progress value={65} size="lg" color="stroke-blue-500" />

Attributes

value (:integer) - Progress percentage from 0 to 100. Defaults to 0.
size (:string) - Ring diameter. One of "sm" (64px), "default" (96px), "lg" (128px), "xl" (160px). Defaults to "default". Must be one of "sm", "default", "lg", or "xl".
color (:string) - Tailwind stroke-* class applied to the progress arc, e.g. "stroke-green-500". Defaults to "stroke-primary".
thickness (:integer) - SVG stroke-width for both the track and arc circles. Default: 8. Defaults to 8.
show_label (:boolean) - When true (default), renders the percentage value in the ring center. Ignored when a :label slot is provided. Defaults to true.
class (:string) - Additional CSS classes for the root element. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the root <div> element.

Slots

label - Custom content rendered in the ring center. When provided, overrides :show_label.