進捗バーProgressBeta
タスクの進捗を示すインジケーターです。
プレビュー
アップロード66%
残り 4 ファイルを処理しています。
状態とバリエーション
進行中
割合と補足文を近くに置いて、何の進捗かを明確にします。
アップロード66%
残り 4 ファイルを処理しています。
動的な進捗
Progress は現在値を描画します。進行、停止、失敗、再試行などの処理状態は親側で管理し、近くのテキストと操作で伝えます。
ファイルアップロード28%
残り 5 ファイルを処理しています。
開始直後
値が小さい場合もバーの高さと横幅は変えず、レイアウトを保ちます。
アップロード18%
キューを準備しています。
意味を持つ充填（tone）
容量・予算・健全性など、充填そのものが意味を持つときは tone で色を変えます（残りわずか→warning、超過→destructive）。色だけに頼らず近くのテキストでも伝えます。
棚 A-01 充填45%
余裕あり。
棚 B-07 充填82%
残りわずか。
棚 C-02 充填100%
満杯。別ロケーションへ。
完了
完了状態も同じコンポーネントで表し、文言で処理が終わったことを伝えます。
アップロード100%
すべてのファイルを処理しました。
最大値を指定
容量や件数など、100以外の単位では max を指定します。
ストレージ42 / 64 GB
最大値が 100 以外の場合は max を指定します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value | number | 0 | 現在の進捗値です。 |
| max | number | 100 | 進捗の最大値です。value は max に対する割合で表示されます。 |
| tone | "default" | "primary" | "success" | "warning" | "destructive" | "info" | "default" | 充填バーの意味色です。容量・予算・健全性など充填自体が意味を持つときに使います（既定は中立の foreground）。 |
| label | string | - | 進捗バーのアクセシブルな名前です（progressbar には名前が必要）。 |
| valueText | string | - | スクリーンリーダーへ読み上げる人間可読な値です（例: 「完了 42/120」）。 |
| className | string | - | 進捗バーのサイズや余白を調整するクラスです。 |
使い方
import { Progress } from "@gunjo/ui"
export function UploadProgress() {
const value = 66
return (
<div className="w-full max-w-sm space-y-2">
<div className="flex items-center justify-between gap-3 text-sm">
<span className="font-medium">アップロード</span>
<span className="text-muted-foreground">{value}%</span>
</div>
<Progress
value={value}
className="h-2 w-full"
aria-label="アップロード進捗"
/>
<p className="text-xs text-muted-foreground">
残り 4 ファイルを処理しています。
</p>
</div>
)
}使用コンポーネント
関連コンポーネント
設計の判断（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。