プログレスバー

タスクに関連するプログレスバーを表示します。

ソースコードを見る問題を報告する Playgroundで確認

<Box maxWidth="300px">
  <Progress />
</Box>

APIリファレンス

このコンポーネントは、Progress プリミティブからプロパティを継承し、共通のマージンプロパティをサポートしています。

プロパティ	型	デフォルト値
`size`	`Responsive<"1" \| "2" \| "3">`	`"2"`
`variant`	`"classic" \| "surface" \| "soft"`	`"surface"`
`color`	`enum`	デフォルト値なし
`highContrast`	`boolean`	デフォルト値なし
`radius`	`"none" \| "small" \| "medium" \| "large" \| "full"`	デフォルト値なし
`duration`	`string`	デフォルト値なし

例

サイズ

size プロパティを使用してサイズを制御します。

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} size="1" />
  <Progress value={50} size="2" />
  <Progress value={75} size="3" />
</Flex>

バリアント

variant プロパティを使用して視覚スタイルを制御します。

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} variant="classic" />
  <Progress value={50} variant="surface" />
  <Progress value={75} variant="soft" />
</Flex>

カラー

color プロパティを使用して特定のカラーを割り当てます。

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={20} color="indigo" />
  <Progress value={40} color="cyan" />
  <Progress value={60} color="orange" />
  <Progress value={80} color="crimson" />
</Flex>

高コントラスト

highContrast プロパティを使用して、背景との色のコントラストを高めます。

<Grid columns="2" gap="4">
  <Progress value={10} color="indigo" />
  <Progress value={10} color="indigo" highContrast />
  <Progress value={30} color="cyan" />
  <Progress value={30} color="cyan" highContrast />
  <Progress value={50} color="orange" />
  <Progress value={50} color="orange" highContrast />
  <Progress value={70} color="crimson" />
  <Progress value={70} color="crimson" highContrast />
  <Progress value={90} color="gray" />
  <Progress value={90} color="gray" highContrast />
</Grid>

角丸

radius プロパティを使用して特定の角丸値を割り当てます。

<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} radius="none" />
  <Progress value={50} radius="small" />
  <Progress value={75} radius="full" />
</Flex>

制御された値を使用

value プロパティを使用して、タスクの進捗状況を正確に示します。

<Progress value={75} />

カスタム期間を使用

duration プロパティを使用して、不確定なタスクのおおよその期間を示します。期間が経過すると、プログレスバーは不確定なアニメーションを開始します。

<Progress duration="30s" />

おおよその期間を推定できる場合、タスクの進捗状況に関する視覚的な手がかりを提供しないSpinnerよりも、Progressコンポーネントの方が役立ちます。

前へPopover

次へRadio

GitHubでこのページを編集する。

概要

テーマ

レイアウト

タイポグラフィ

コンポーネント

ユーティリティ

プログレスバー