ProgressBar

Eine ProgressBar zeigt den Fortschritt eines laufenden Prozesses visuell in Form eines horizontalen Balkens an. Sie eignet sich sowohl für temporäre Prozesse als auch für Zustände mit konstantem Monitoring.GitHub

Speicher50 %

Playground

Verwende <ProgressBar />, um eine ProgressBar darzustellen.

Speicher50 %

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

Speicher500 GB

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

<ProgressBar
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "unit", unit: "gigabyte" }}
>
  <Label>Speicher</Label>
</ProgressBar>

Dezimalzahl

Stückzahl500

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

<ProgressBar
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "decimal" }}
>
  <Label>Stückzahl</Label>
</ProgressBar>

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

Speicher500 GB of 1,000 GB

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

<ProgressBar
  showMaxValue
  value={500}
  maxValue={1000}
  minValue={0}
  formatOptions={{ style: "unit", unit: "gigabyte" }}
>
  <Label>Speicher</Label>
</ProgressBar>

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.

Größe S50 %

Größe M50 %

Größe L50 %

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

<Column>
  <ProgressBar size="s" value={50}>
    <Label>Größe S</Label>
  </ProgressBar>
  <ProgressBar size="m" value={50}>
    <Label>Größe M</Label>
  </ProgressBar>
  <ProgressBar size="l" value={50}>
    <Label>Größe L</Label>
  </ProgressBar>
</Column>

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

Success100 %

Info50 %

Warning70 %

Danger90 %

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

<Row>
  <ProgressBar value={100} status="success">
    Success
  </ProgressBar>
  <ProgressBar value={50} status="info">
    Info
  </ProgressBar>
  <ProgressBar value={70} status="warning">
    Warning
  </ProgressBar>
  <ProgressBar value={90} status="danger">
    Danger
  </ProgressBar>
</Row>

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 die Legend-Component 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.

Speicher560 GB of 1,000 GB

E-Mails (280 GB)
Datenbanken (170 GB)
Backups (110 GB)

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

<ProgressBar
  maxValue={1000}
  size="l"
  showMaxValue
  formatOptions={{ style: "unit", unit: "gigabyte" }}
  segments={[
    { value: 280, title: "E-Mails" },
    {
      value: 170,
      title: "Datenbanken",
    },
    {
      value: 110,
      title: "Backups",
    },
  ]}
>
  <Label>Speicher</Label>
</ProgressBar>

Components