---
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         |
    | イージング | string | プログレスバーアニメーションのイージング関数                                 | easeInOut |
    | バーの高さ | 数      | バーの高さ（ピクセル）                                            | 24        |
    | バーの色  | string | バーの色                                                   | グレー80     |
    | 自動開始  | ブール型   | `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    |
    | バーの幅  | 数      | プログレスバーのラインの幅 | 5     |
    | バーの色  | string | プログレスバーの色     | 現在の色  |
  </Tab>
</Tabs>