---
title: Rückmeldung
---

Zeigt den Fortschritt oder Countdown an und bewegt sich von rechts nach links.

<Tabs>

<Tab title="&#x22;Verwendung&#x22;">

```jsx
import { ProgressBar } from "twenty-ui/feedback";

export const MyComponent = () => {
  return (
    <ProgressBar
      duration={6000}
      delay={0}
      easing="easeInOut"
      barHeight={10}
      barColor="#4bb543"
      autoStart={true}
    />
  );
};
```

</Tab>

<Tab title="&#x22;Eigenschaften&#x22;">


| "Eigenschaften" | Typ          | Beschreibung                                                                                                | Standard  |
| --------------- | ------------ | ----------------------------------------------------------------------------------------------------------- | --------- |
| Dauer           | nummer       | Die Gesamtdauer der Fortschrittsbalken-Animation in Millisekunden                                           | 3         |
| Verzögerung     | nummer       | Die Verzögerung beim Starten der Fortschrittsbalken-Animation in Millisekunden                              | 0         |
| Easing          | string       | Easing-Funktion für die Fortschrittsbalken-Animation                                                        | easeInOut |
| Balkenhöhe      | nummer       | Die Höhe des Balkens in Pixeln                                                                              | 24        |
| Balkenfarbe     | Zeichenkette | Die Farbe des Balkens                                                                                       | gray80    |
| AutoStart       | boolesch     | Wenn `true`, startet die Animation des Fortschrittsbalkens automatisch, wenn die Komponente gemountet wird. | `wahr`    |



</Tab>
</Tabs>

## Zirkularer Fortschrittsbalken

Zeigt den Fortschritt einer Aufgabe an, wird häufig auf Ladebildschirmen oder in Bereichen verwendet, in denen Sie laufende Prozesse an den Benutzer kommunizieren möchten.

<Tabs>

<Tab title="Verwendung">

```jsx
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

export const MyComponent = () => {
  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
```

</Tab>

<Tab title="Eigenschaften">


| Eigenschaften | Typ          | Beschreibung                                 | Standard     |
| ------------- | ------------ | -------------------------------------------- | ------------ |
| größe         | nummer       | Die Größe des zirkularen Fortschrittsbalkens | 50           |
| Balkenbreite  | nummer       | Die Breite der Fortschrittsbalkenlinie       | 5            |
| Balkenfarbe   | Zeichenkette | Die Farbe des Fortschrittsbalkens            | currentColor |



</Tab>

</Tabs>