> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Zpětná vazba

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

<Tabs>
  <Tab title="Použití">
    ```jsx theme={null}
    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 theme={null}
    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>