---
title: 피드백
image: /images/user-guide/emails/emails_header.png
---

<Frame>
  <img src="/images/user-guide/emails/emails_header.png" alt="헤더" />
</Frame>

진행 또는 카운트다운을 나타내며 오른쪽에서 왼쪽으로 이동합니다.

<Tabs>
  <Tab title="사용법">
    ```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="프로퍼티">
    | 프로퍼티      | 유형  | 설명                                               | 기본값       |
    | --------- | --- | ------------------------------------------------ | --------- |
    | 지속 시간     | 숫자  | 진행 표시줄 애니메이션의 전체 지속시간 (밀리초 단위)                   | 3         |
    | 지연        | 숫자  | 진행 표시줄 애니메이션 시작 지연 시간 (밀리초 단위)                   | 0         |
    | 이징        | 문자열 | 진행 표시줄 애니메이션을 위한 이징 함수                           | easeInOut |
    | barHeight | 숫자  | 바의 높이 (픽셀 단위)                                    | 24        |
    | barColor  | 문자열 | 바의 색상                                            | gray80    |
    | autoStart | 부울  | `true`이면, 컴포넌트가 마운트될 때 진행 표시줄 애니메이션이 자동으로 시작됩니다. | `참`       |
  </Tab>
</Tabs>

## 원형 진행 표시줄

작업의 진행 상황을 나타내며, 로딩 화면이나 진행 중인 프로세스를 사용자에게 전달하고자 할 때 자주 사용됩니다.

<Tabs>
  <Tab title="사용법">
    ```jsx
    import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

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

  <Tab title="프로퍼티">
    | 프로퍼티     | 유형  | 설명            | 기본값          |
    | -------- | --- | ------------- | ------------ |
    | 크기       | 숫자  | 원형 진행 표시줄의 크기 | 50           |
    | barWidth | 숫자  | 진행 표시줄 선의 너비  | 5            |
    | barColor | 문자열 | 진행 표시줄의 색상    | currentColor |
  </Tab>
</Tabs>