Fortschrittsbalken

Fortschrittsbalken (determiniert oder unbestimmt) mit Tönen und optionaler Wertanzeige

Im Builder nutzen

Beispiele

Mit Beschriftung und Wert

Import läuft64 %

Erfolg (fertig)

Abgeschlossen100 %

Warnung

Speicherbelegung85 %

Unbestimmt

Verbinde …

Wert über 100 → gekappt

100 %

Ring mit Wert

72 %

Speicher

Ring unbestimmt

Lädt …

Eigenschaften

Prop	Typ	Default	Builder-Label
value	number	0	Wert (0–100)
indeterminate	boolean	false	Unbestimmt (Animation)
tone	string: primary | success | warning | danger	"primary"	Ton
label	string	""	Beschriftung
showValue	boolean	false	Prozentwert anzeigen
shape	string: bar | ring	"bar"	Form

* Pflicht-Prop

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
--progress-track	var(--color-surface-sunken)
--progress-bar	var(--color-action-primary)
--progress-ring-size	var(--size-16)

Genutzte Design-Tokens

color.action.primarycolor.status.dangercolor.status.successcolor.status.warningcolor.surface.sunkencolor.text.defaultcolor.text.mutedcontainer.smduration.baseduration.sloweasing.standardfont.family.defaultfont.family.monoradius.fullsize.16size.2text.smtext.xs