Version: latest

Universell einsetzbar

ProgressBar funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/progress-bar) — die Library erkennt die Umgebung automatisch.

ProgressBar

ProgressBar rendert linearen Fortschritt in determinierten oder indeterminierten Modi mit klarer Statusvisualisierung.

Übersicht

import { ProgressBar } from "@prokodo/ui/progress-bar"
;<ProgressBar value={65} max={100} label="Upload progress" />

Live PreviewOpen in Storybook ↗

Import

import { ProgressBar } from "@prokodo/ui/progress-bar"

CSS:

import "@prokodo/ui/progress-bar.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`value`	`number`	—	—	Current progress value. Required for determinate mode.
`max`	`number`	`100`	—	Maximum progress value.
`variant`	`"determinate" \| "indeterminate"`	`"determinate"`	—	Progress mode.
`color`	`"primary" \| "secondary" \| "success" \| "error"`	`"primary"`	—	Track color.
`label`	`string`	—	—	Accessible ARIA label.
`showLabel`	`boolean`	`false`	—	Display a percentage label above the bar.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/progress-bar/ProgressBar.model.ts für den vollständigen ProgressBarProps-Typ.

Design-Tokens

Passe via CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
`--pk-progressbar-track-bg`	`var(--pk-color-surface-raised)`	Track-Hintergrund
`--pk-progressbar-radius`	`0.75rem`	Track-Eckenradius
`--pk-progressbar-height`	`1rem`	Track-Höhe
`--pk-progressbar-shadow`	`var(--elevation-2)`	Track-Box-Shadow
`--pk-progressbar-label-size`	`0.875rem`	Label-Schriftgröße

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { ProgressBar } from "@prokodo/ui/progress-bar"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.
4.1.3	Statusmeldungen (AA)	✅ Erfüllt	Statusmeldungen (Laden, Erfolg, Fehler, Fortschritt) müssen assistiven Technologien ohne Fokusverschiebung mitgeteilt werden (aria-live oder role='status').

Testabdeckung: 3 jest-axe-Assertion(s) in 4 Testdatei(en) · 4 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 ProgressBar in Storybook öffnen

Quellcode

src/components/progress-bar/ProgressBar.model.ts