# Progress
> Generated from progress.contract.json — do not edit by hand.

A determinate progress indicator — completion, upload, a quiz timer — as a line, segmented steps, or a circle.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `percent` | number | `0` | Completion 0–100; clamped and drives the fill |
| `type` | 'line' | 'circle' | `line` | Shape: horizontal bar or SVG ring |
| `steps` | number | `0` | Split a line into N discrete segments (line type only) |
| `size` | 'default' | 'small' | `default` | Compact Mini variant (thinner bar / smaller ring) |
| `status` | default | active | success | warning | exception | `default` | Fill colour (exception aliases error) |
| `show-info` | boolean | `true` | Show the trailing percent/glyph label (set 'false' to hide) |

## Visual standard (measured)
- Track: line height 8 (small 6) · radius pill · #F1F1F1
- Fill: default primary #6A1EBB · width (line) or stroke-dashoffset (circle) = percent
- Type: line (default) · circle (SVG ring, box 96 / small 40)
- Steps: steps=N → N equal segments, first round(percent) filled
- Status: active primary · success #16C49A · warning #FF7747 · exception #F5222D
- Motion: width / stroke-dashoffset animate on --aha-motion-slow / --aha-ease-out
- Info: percent label (✓/✕ glyph at success/exception); hide with show-info=false
- A11y: role=progressbar · aria-valuemin 0 / valuemax 100 / valuenow synced to percent

## When to use
- **Progress** — a determinate task with a known percentage (upload, steps, a timer)
- **Spin** — an indeterminate wait with no measurable percentage
- **Skeleton** — content is loading and you want to hold its layout

Use Progress only when you can measure completion. A line for inline flow, steps for a discrete multi-stage task, a circle for a compact score dial. Let the fill colour carry success/exception, not a separate label. For an indeterminate wait use Spin.