> ## 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.

# Обратная связь

Указывает на прогресс или обратный отсчет и перемещается справа налево.

<Tabs>
  <Tab title="Использование">
    ```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="Свойства">
    | Свойства          | Тип    | Описание                                                                                    | По умолчанию |
    | ----------------- | ------ | ------------------------------------------------------------------------------------------- | ------------ |
    | Продолжительность | число  | Общая продолжительность анимации индикатора прогресса в миллисекундах                       | 3            |
    | Задержка          | число  | Задержка начала анимации индикатора прогресса в миллисекундах                               | 0            |
    | Сглаживание       | строка | Сглаживающая функция для анимации индикатора прогресса                                      | easeInOut    |
    | Высота индикатора | число  | Высота полосы в пикселях                                                                    | 24           |
    | Цвет полосы       | строка | Цвет полосы                                                                                 | gray80       |
    | Автозапуск        | булево | Если `true`, анимация индикатора прогресса начинается автоматически при загрузке компонента | `истина`     |
  </Tab>
</Tabs>

## Круговой индикатор прогресса

Указывает на прогресс задачи, часто используется на экранах загрузки или в областях, где необходимо сообщить пользователю о текущих процессах.

<Tabs>
  <Tab title="Использование">
    ```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="Свойства">
    | Свойства      | Тип    | Описание                              | По умолчанию |
    | ------------- | ------ | ------------------------------------- | ------------ |
    | Размер        | число  | Размер кругового индикатора прогресса | 50           |
    | Ширина полосы | число  | Ширина линии индикатора прогресса     | 5            |
    | Цвет полосы   | строка | Цвет индикатора прогресса             | currentColor |
  </Tab>
</Tabs>