Progress
進捗を表示するプログレスバーコンポーネント。
インポート
import { Progress } from '@caroainc/ui-components/client'個別サブパス（バンドルサイズを抑えたい場合）:
import { Progress } from '@caroainc/ui-components/progress'基本的な使い方
<Progress value={60} />様々な進捗値
Loading...
<Progress value={0} />
<Progress value={25} />
<Progress value={50} />
<Progress value={75} />
<Progress value={100} />バリアント
Loading...
<Progress value={60} variant="base" />
<Progress value={60} variant="primary" />Indeterminate（進捗値が不明な場合）
value を undefined（または null）にすると、進捗値が不明な状態として扱われます。バーの一部が流れるようにアニメーションし、「処理中だが進捗率は分からない」ことを示します（内部的にRadixが data-state="indeterminate" を付与し、スクリーンリーダーにも進捗不明として伝わります）。
{/* value を渡さない、または undefined を渡す */}
<Progress />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | undefined | undefined | 進捗値（0-100）。undefined/nullの場合はindeterminate（進捗不明）表示になる |
max | number | 100 | 最大値 |
variant | 'base' | 'primary' | 'base' | バーの色バリアント |