# UI: ProgressBar

> Ein beschrifteter Fortschrittsbalken mit seinem Wert als Text.

Source: https://pithyx.org/de/docs/reference/sdk/ui/progress-bar/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/progress-bar.md

Ein beschrifteter Fortschrittsbalken mit seinem Wert als Text. Importiere die Token-Datei einmal (`@pithyx/ui/tokens.css`) und umschließe die App mit `UiProvider`; siehe [@pithyx/ui](https://pithyx.org/de/docs/sdk/ui/).

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

## Schnittstellen

### ProgressBarProps

The props of [ProgressBar](#progressbar): React Aria's progress bar props plus the label.

#### Erweitert

- `Omit`\<`AriaProgressBarProps`, `"className"` \| `"children"`\>

#### Eigenschaften

##### label

```ts
label: ReactNode;
```

The label above the bar, also the accessible name.

##### showValue?

```ts
optional showValue?: boolean;
```

Whether the value is shown as text next to the label; true when left out.

##### className?

```ts
optional className?: string;
```

Extra class names, added after the bar's own.

## Funktionen

### ProgressBar()

```ts
function ProgressBar(props): Element;
```

A labelled progress bar that shows its value as text unless `showValue` is false. Without `value` it is
indeterminate only when `isIndeterminate` is set.

#### Parameter

| Parameter | Typ                                     | Beschreibung                                                                                       |
| --------- | --------------------------------------- | -------------------------------------------------------------------------------------------------- |
| `props`   | [`ProgressBarProps`](#progressbarprops) | React Aria's progress bar props (`value`, `minValue`, `maxValue`, `formatOptions`) plus the label. |

#### Rückgabewert

`Element`

The progress bar with its label.