Progress Ring
FreeCircular SVG progress indicator in xs–xl sizes with default, gradient, dashed and glow variants and a custom label slot.
</>sv-progress-ring progresscircularfeedback
import { SvProgressRingComponent } from '@styloviz/overlays';Demo & usage
Basic usage
Usage example — open the gallery for the full interactive demo.
An interactive demo for this component lives in the gallery.
Open live demoMore examples
Gradient with label
example.htmlAngular
1 lines
<sv-progress-ring [value]="92" size="xl" variant="gradient" label="Storage" sublabel="92% used" [showValue]="true" suffix="%" />
Named + completion event
example.htmlAngular
1 lines
<sv-progress-ring [value]="pct()" ariaLabel="Sync progress" (completed)="onSynced()" />
When to use
- Showing a single completion percentage in a compact, circular form.
- Dashboards and cards where a horizontal bar would waste width.
- For step-by-step linear progress, use the Progress Bar.
Async states
None — this component has nothing to load, so it has no loading, empty or error state to drive.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Current progress value (0–max). |
| max | number | 100 | Value that represents 100%. |
| size | ProgressRingSize | 'md' | Ring size: xs–xl. |
| variant | ProgressRingVariant | 'default' | Visual variant: default, gradient, dashed or glow. |
| color | string | 'var(--color-primary-500)' | Progress arc color (any CSS color). |
| trackColor | string | '' | Track (background) color; defaults to a subtle tint. |
| label | string | '' | Primary center label. |
| sublabel | string | '' | Secondary center label below the value. |
| showValue | boolean | true | Show the numeric value in the center. |
| suffix | string | '%' | Unit appended to the value (e.g. %). |
| animated | boolean | true | Animate the arc on value change. |
| lineCap | 'round' | 'butt' | 'round' | Arc end-cap style. |
| ariaLabel | string | '' | Accessible name for the ring. Falls back to the label or a generated summary. |
| valueText | string | '' | What a screen reader should read for the VALUE. Falls back to a generated string with the unit. |
| customClass | string | '' | Extra CSS classes merged onto the root wrapper. |
Outputs
| Event | Payload type | Description |
|---|---|---|
| completed | void | Emitted once when the ring first reaches 100%. |
Customization & theming
- Five sizes (xs–xl).
- Default, gradient, dashed and glow variants.
- Custom center label and suffix.
- `customClass` to extend the wrapper.
Best practices
- Do: Render the numeric value in the center so it's readable at a glance.
- Do: Keep the ring to one value — it represents a single ratio.
- Tip: Use the gradient/glow variants sparingly for hero metrics.
Accessibility
- Now exposes a `progressbar` role with `aria-valuenow`/`min`/`max` and a resolved `aria-label` (was previously hidden from assistive tech).
- The arc transition honours `prefers-reduced-motion`, and a `completed` output fires once on reaching 100%.
Feedback on Progress Ring
Spotted a gap in this page, or something that didn't work as described? Comments are GitHub Discussions in the public styloviz/community repo, so posting needs a GitHub account.