# `PhiaUi.Components.CircularProgress`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/feedback/circular_progress.ex#L1)

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} />

# `circular_progress`

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`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*