ProgressBar

Grundlagen

Eine ProgressBar zeigt den Fortschritt eines laufenden Prozesses visuell in Form eines horizontalen Balkens an. Sie eignet sich sowohl für temporäre Prozesse (z. B. Uploads) als auch für Zustände mit konstantem Monitoring, wie z. B. die Auslastung von Speicherplatz.

Best Practices

Achte bei der Verwendung einer ProgressBar darauf, dass ...

• der Fortschritt eindeutig kommuniziert wird (z. B. 8 GB von 10 GB).
• bei der Darstellung von Speicherplatzauslastung Schwellenwerte visuell hervorgehoben werden (z. B. Statuswechsel ab 80 % Auslastung zur Warning).
• bei indeterminate Zuständen (z. B. unklarer Ladefortschritt) eine Alternative, wie zum Beispiel der LoadingSpinner, verwendet wird.
• bei statischen Anwendungen wie Speicherplatzauslastung regelmäßige Aktualisierung durch das System erfolgt, um Verlässlichkeit zu gewährleisten.

Verwendung

Verwende eine ProgressBar, um ...

• Prozesse mit vorhersehbarer Dauer visuell zu begleiten (z. B. Datei-Uploads oder Installationen).
• Usern ein Gefühl für verbleibende Zeit oder verfügbare Kapazitäten zu geben.
• kontinuierlich überwachte Zustände darzustellen (z. B. Speicherplatzauslastung).
• kritische Zustände frühzeitig visuell hervorzuheben (z. B. durch Farbwechsel bei hoher Auslastung).
• in Dashboards platzsparend Informationen darzustellen.

Playground

Verwende <ProgressBar />, um eine ProgressBar darzustellen.

import {
  Label,
  ProgressBar,
} from "@mittwald/flow-react-components";

<ProgressBar value={50}>
  <Label>Speicher</Label>
</ProgressBar>

Mit Unit

Im Standard wird die ProgressBar immer mit Prozentangabe angezeigt. Über das Property formatOptions können aber auch andere Einheiten gewählt werden (s. Intl.NumberFormat).

Gigabyte

Dezimalzahl

Mit Max Value

Der maximale Wert der ProgressBar lässt sich individuell festlegen, je nachdem, was dargestellt werden soll. Standardmäßig beträgt dieser Wert 100 %.

Sizes

ProgressBars sind in drei verschiedenen Größen verfügbar: Small, Medium und Large.

Die mittlere Größe Medium ist Standard und wird am häufigsten verwendet. Die verschiedenen Größen eignen sich gut, um eine visuelle Hierarchie innerhalb der Seite zu erzeugen. So kann die größte Variante Large sehr gut alleinstehend eingesetzt werden, wenn die ProgressBar besondere Aufmerksamkeit auf sich ziehen soll.

Status

Je nach Anwendungsfall stehen vier Status-Farben zur Auswahl: Success, Info, Warning und Danger. Diese Status helfen insbesondere bei der Darstellung von Speicherplatzauslastung, um Schwellenwerte visuell hervorzuheben (z. B. Statuswechsel ab 80 % Auslastung zur Warning).

Segmente

Die Anzeige der ProgressBar kann über das segments Property um einzelne Abschnitte ergänzt werden. Der value ergibt sich in diesem Fall aus der Summe der Werte der einzelnen Segmente. Um die einzelnen Werte näher zu erläutern, wird automatisch eine Legende angezeigt. Über das showLegend Property kann diese ein- und ausgeblendet werden.

Die Farben der Segmente werden automatisch festgelegt, können aber über das color Property überschrieben werden. Beim Überschreiben muss darauf geachtet werden, dass nebeneinanderliegende Farben weiterhin einen ausreichenden Kontrast zueinander haben.

Properties

Events

Accessibility