## Progress
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.
Default to the HTML snippet — <aha-progress> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, audience.
Props:
- percent: number, default 0. Completion 0–100; clamped and drives the fill
- type: 'line' | 'circle', default line. Shape: horizontal bar or SVG ring
- steps: number, default 0. Split a line into N discrete segments (line type only)
- size: 'default' | 'small', default default. Compact Mini variant (thinner bar / smaller ring)
- status: default | active | success | warning | exception, default default. Fill colour (exception aliases error)
- show-info: boolean, default true. Show the trailing percent/glyph label (set 'false' to hide)
Tokens: color-primary, color-success, color-warning, color-error, gray-30, radius-pill, text-secondary, text-positive, text-negative.
Use when: 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).