Fortschrittsring 1.2.0

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

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

Kompakter kreisfürmiger Fortschritt in Cards, Dashboards oder Toolbars.
Wenn ein numerischer Prozentwert in der Mitte des Indikators stehen soll.

Wann nicht

Full-width determinate/indeterminate bars — use Fortschritt.
Indeterminate busy-only states — use Ladeanzeigen.
Es gibt keinen eigenen Label-Slot; der mittige Text ist immer {value}% (ausblenden mit label="false").

Basis-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 Attribut (in Pixeln), um den Ring zu skalieren.

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

Farbe

Use the color Attribut mit einem beliebigen CSS-Farbwert oder semantischen Namen.

<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

Das Prozent-Label wird standardmäßig angezeigt. Setze label="false" zum Ausblenden. Es gibt keine API für ein eigenes slotted Label.

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

Barrierefreiheit

Host und SVG exponieren role="progressbar" with aria-valuenow / min / max.
Standard aria-label ist {value}%; überschreibe es bei Bedarf mit dem aria-label Attribut.
Stroke-Transitions respektieren prefers-reduced-motion: reduce.

API

Attribute

Attribut	Typ	Beschreibung
`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	Override für Accessible Name

Parts

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

Best Practices & Fallstricke

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