Progress Ring 1.2.2

The <velin-progress-ring> web component renders a circular SVG progress indicator with configurable value, size, color, and optional centre label. Deutsch: Fortschrittsring

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Compact circular progress in cards, dashboards, or toolbars.
When a numeric percentage should sit in the centre of the indicator.

When not

Full-width determinate/indeterminate bars — use Progress.
Indeterminate busy-only states — use Spinners.
There is no custom label slot; the centre text is always {value}% (hide with label="false").

Basic ring

<velin-progress-ring value="25"></velin-progress-ring>
<velin-progress-ring value="50"></velin-progress-ring>
<velin-progress-ring value="75"></velin-progress-ring>

Size

Set the size attribute (in pixels) to scale the ring.

<velin-progress-ring value="60" size="48"></velin-progress-ring>
<velin-progress-ring value="60" size="80"></velin-progress-ring>
<velin-progress-ring value="60" size="120"></velin-progress-ring>

Color

Use the color attribute with any CSS colour value or semantic name.

<velin-progress-ring value="80" color="success"></velin-progress-ring>
<velin-progress-ring value="40" color="warning"></velin-progress-ring>
<velin-progress-ring value="90" color="#e91e63"></velin-progress-ring>

Label

The percentage label is shown by default. Set label="false" to hide it. There is no slotted custom label API.

<velin-progress-ring value="72"></velin-progress-ring>
<!-- Hide centre percentage -->
<velin-progress-ring value="40" label="false"></velin-progress-ring>

Accessibility

Host and SVG expose role="progressbar" with aria-valuenow / min / max.
Default aria-label is {value}%; override with the aria-label attribute when needed.
Stroke transitions respect prefers-reduced-motion: reduce.

API

Attributes

Attribute	Type	Description
`value`	Number	Observed — 0–100
`size`	Number	Observed — diameter in px (default 120)
`stroke`	Number	Observed — stroke width in px (default 8)
`color`	String	Observed — semantic token name (e.g. `success`) or CSS colour
`label`	String	Not observed — any value other than `"false"` shows the centre percentage (default on)
`aria-label`	String	Accessible name override

Parts

svg, fill, label. No slots, methods, or events.

Best practices & pitfalls

Clamp values yourself if you feed live data; the component clamps to 0–100.
Do not invent a custom centre label slot — put explanatory text beside the ring instead.
Semantic color values resolve via --velin-color-{name}.