ProgressBar

Eine ProgressBar zeigt den Fortschritt eines laufenden Prozesses als horizontalen Balken an.

Speicher50 %

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

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

Best Practices

Kommuniziere den Fortschritt eindeutig. Ein Beispiel ist „8 GB von 10 GB".
Kombiniere die Status-Farben gezielt, um Zustände hervorzuheben. Wechsle etwa bei hoher Auslastung auf Warning oder Danger.
Nutze bei unbestimmtem Fortschritt eine Alternative wie den LoadingSpinner‍.
Aktualisiere dauerhaft angezeigte ProgressBars regelmäßig. Das erhält die Verlässlichkeit, etwa bei der Speicherplatzauslastung.

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 %

Status

Je nach Anwendungsfall stehen vier Status-Farben zur Auswahl: Success, Info, Warning und Danger. Wechsle bei einer hohen Auslastung zum Beispiel auf Warning oder Danger, um den Zustand hervorzuheben.

Success100 %

Info50 %

Warning70 %

Danger90 %

Mit Unit

Im Default 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

Dezimalzahl

Stückzahl500

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

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.

Speicher560 GB of 1,000 GB

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

Properties

Property	Type	Default	Description
`children`	`ReactNode`	-
`className`	`ClassNameOrFunction<ProgressBarRenderProps>`	'react-aria-ProgressBar'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`dir`	`string`	-
`formatOptions`	`NumberFormatOptions`	{ style: 'percent' }	The display format of the value label.
`hidden`	`boolean`	-
`id`	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	`boolean`	-
`isIndeterminate`	`boolean`	-	Whether presentation is indeterminate when progress isn't known.
`lang`	`string`	-
`maxValue`	`number`	100	The largest value allowed for the input.
`minValue`	`number`	0	The smallest value allowed for the input.
`render`	`DOMRenderFunction<"div", TooltipRenderProps>`	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`segments`	`{ value: number; title: string; color?: CategoricalWithCustomColor; valueText?: string; }[]`	-	Divides the fill of the progress bar into segments
`showLegend`	`boolean`	: true	Whether the legend component is shown when segments are used.
`showMaxValue`	`boolean`	-	Whether the max value should be displayed.
`size`	`"s" \| "m" \| "l"`	"m"	The size variant of the progress bar.
`slot`	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`status`	`"info" \| "success" \| "warning" \| "danger"`	-	The status the progress bar is colored by.
`style`	`StyleOrFunction<TooltipRenderProps>`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	`"yes" \| "no"`	-
`value`	`number`	0	The current value (controlled).
`valueLabel`	`ReactNode`	-	The content to display as the value's label (e.g. 1 of 4).
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

Property	Type	Default	Description
`onClick`	`MouseEventHandler<HTMLDivElement>`	-

Accessibility

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object.
`aria-details`	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	`string`	-	Defines a string value that labels the current element.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element.

Components

Integrations