# 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.
## Overview
# Playground
Verwende ``, um eine ProgressBar darzustellen.
```tsx
import {
Label,
ProgressBar,
} from "@mittwald/flow-react-components";
```
---
# 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat)).
## Gigabyte
```tsx
import {
Label,
ProgressBar,
} from "@mittwald/flow-react-components";
```
## Dezimalzahl
```tsx
import {
Label,
ProgressBar,
} from "@mittwald/flow-react-components";
```
---
# 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 %.
```tsx
import {
Label,
ProgressBar,
} from "@mittwald/flow-react-components";
```
---
# 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.
```tsx
import {
Label,
ProgressBar,
} from "@mittwald/flow-react-components";
<>
```
---
# 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).
```tsx
import { ProgressBar } from "@mittwald/flow-react-components";
<>
Success
Info
Warning
Danger
```
---
# 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.
```tsx
import {
Label,
ProgressBar,
} from "@mittwald/flow-react-components";
```
## Develop
# Properties
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `status` | `"info" \| "success" \| "warning" \| "danger"` | - | - |
| `showMaxValue` | `boolean` | - | Whether the max value should be displayed. |
| `size` | `"s" \| "m" \| "l"` | `"m"` | The size variant of the progress bar. |
| `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. |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `translate` | `"yes" \| "no"` | - | - |
| `className` | `ClassNameOrFunction` | `'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. |
| `style` | `StyleOrFunction` | - | 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. |
| `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 `