- 使用方法
- プロパティ
import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (
<ProgressBar
duration={6000}
delay={0}
easing="easeInOut"
barHeight={10}
barColor="#4bb543"
autoStart={true}
/>
);
};
| プロパティ | タイプ | 説明 | デフォルト |
|---|---|---|---|
| 継続時間 | 数 | プログレスバーアニメーションの総デュレーション（ミリ秒） | 3 |
| 遅延 | 数 | プログレスバーアニメーションの開始遅延時間（ミリ秒） | 0 |
| イージング | string | プログレスバーアニメーションのイージング関数 | easeInOut |
| バーの高さ | 数 | バーの高さ（ピクセル） | 24 |
| バーの色 | string | バーの色 | グレー80 |
| 自動開始 | ブール型 | trueの場合、コンポーネントがマウントされたときにプログレスバーアニメーションが自動的に開始されます。 | 真 |
円形プログレスバー
タスクの進捗を示し、ユーザーに進行中のプロセスを伝達したい場合に、ロード画面などでよく使用されます。- 使用方法
- プロパティ
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
export const MyComponent = () => {
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
};
| プロパティ | タイプ | 説明 | デフォルト |
|---|---|---|---|
| サイズ | 数 | 円形プログレスバーのサイズ | 50 |
| バーの幅 | 数 | プログレスバーのラインの幅 | 5 |
| バーの色 | string | プログレスバーの色 | 現在の色 |