---
title: Zpětná vazba
---

Udává průběh nebo odpočítávání a pohybuje se zprava doleva.

<Tabs>

<Tab title="Použití">

```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="Vlastnosti">


| Vlastnosti | Typ                | Popis                                                                                | Výchozí   |
| ---------- | ------------------ | ------------------------------------------------------------------------------------ | --------- |
| trvání     | číslo              | Celková doba trvání animace indikačního pruhu v milisekundách                        | 3         |
| zpoždění   | číslo              | Zpoždění spuštění animace indikačního pruhu v milisekundách                          | 0         |
| easing     | textový řetězec    | Easingová funkce pro animaci indikačního pruhu                                       | easeInOut |
| barHeight  | číslo              | Výška pruhu v pixelech                                                               | 24        |
| barvaPruhu | textový řetězec    | Barva pruhu                                                                          | gray80    |
| autoStart  | booleovská hodnota | Pokud `true`, animace indikačního pruhu se automaticky spustí při načtení komponenty | `pravda`  |



</Tab>
</Tabs>

## Kruhový indikátor průběhu

Udává průběh úkolu, často používané na načítacích obrazovkách nebo v oblastech, kde chcete uživateli sdělovat probíhající procesy.

<Tabs>

<Tab title="Použití">

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

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

</Tab>

<Tab title="Vlastnosti">


| Vlastnosti | Typ             | Popis                                | Výchozí       |
| ---------- | --------------- | ------------------------------------ | ------------- |
| velikost   | číslo           | Velikost kruhového indikačního pruhu | 50            |
| barWidth   | číslo           | Šířka čáry indikačního pruhu         | 5             |
| barvaPruhu | textový řetězec | Barva indikačního pruhu              | současnáBarva |



</Tab>

</Tabs>