Fortschrittsbalken — ui.progress
Fortschrittsbalken (determiniert oder unbestimmt) mit Tönen und optionaler Wertanzeige
UI Elementv1.1.0Statusweb.documentweb.applicationdesktop.shell
Beispiele
Mit Beschriftung und Wert
Import läuft64 %
Erfolg (fertig)
Abgeschlossen100 %
Warnung
Speicherbelegung85 %
Unbestimmt
Verbinde …
Wert über 100 → gekappt
100 %
Ring mit Wert
72 %
SpeicherRing unbestimmt
Lädt …
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
value | number | 0 |
indeterminate | boolean | false |
tone | string: primary | success | warning | danger | "primary" |
label | string | "" |
showValue | boolean | false |
shape | string: bar | ring | "bar" |
Stellschrauben (Komponenten-Tokens)
| 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.primary color.status.danger color.status.success color.status.warning color.surface.sunken color.text.default color.text.muted container.sm duration.base duration.slow easing.standard font.family.default font.family.mono radius.full size.16 size.2 text.sm text.xs