Progress
Progressは、タスクの進行状況を視覚的に表示するコンポーネントです。リニアバーと円形の2つのタイプを提供し、ファイルアップロードやステップ進捗など確定的な進行率の表示に使用します。
2
Types
3
Sizes
2
Colors
Radix
Base
Playground
Preview
lineardefault0%
Type
Size
Color
Variant
Options
<Progress value={0} />Sizes
smトラック高さ4px
円形直径32px
defaultトラック高さ8px
円形直径48px
lgトラック高さ12px
円形直径64px
| Size | トラック高さ | 円形直径 | Linear | Circular |
|---|---|---|---|---|
sm | 4px | 32px | ||
default | 8px | 48px | ||
lg | 12px | 64px |
Features
Type
リニアバーと円形の2つのタイプを提供します。用途に応じて使い分けてください。
<Progress value={60} />
<Progress type="circular" value={60} />Striped
variant="striped"で対角線ストライプを表示。animatedを追加すると流れるアニメーションが有効になります。
<Progress value={70} variant="striped" />
<Progress value={70} variant="striped" animated />Show Value
showValueでパーセンテージを表示。formatLabelでカスタムフォーマットが可能です。
75%
75%
75%
750/1000 MB
<Progress value={75} showValue />
<Progress type="circular" value={75} showValue />
<Progress value={750} max={1000} showValue
formatLabel={(v, max) => `${v}/${max} MB`} />API
Component Structure
Progress— Radix Progressスタンドアロンコンポーネント。サブコンポーネントはありません。
Props
type"linear""linear" | "circular"表示タイプ（リニアバーまたは円形）
value0number進捗値（0〜max）
max100number最大値
size"default""sm" | "default" | "lg"サイズ（linear: トラック高さ、circular: 直径）
variant"default""default" | "striped"視覚バリアント（linearのみ）
color"default""default" | "primary"インジケーターの色（default: ダーク、primary: プライマリー）
indicatorClassNameundefinedstringインジケーターのカスタムクラス（colorを上書き）
showValuefalsebooleanパーセント値を表示
formatLabelundefined(value: number, max: number) => string値のカスタムフォーマッター
animatedfalsebooleanストライプの流れアニメーション（striped variant時のみ）
thicknessundefinednumber円形のストローク幅（circularのみ）
labelundefinedstringアクセシビリティラベル
classNameundefinedstring追加のCSSクラス
| Name | Type | Default | Description |
|---|---|---|---|
type | "linear" | "circular" | "linear" | 表示タイプ（リニアバーまたは円形） |
value | number | 0 | 進捗値（0〜max） |
max | number | 100 | 最大値 |
size | "sm" | "default" | "lg" | "default" | サイズ（linear: トラック高さ、circular: 直径） |
variant | "default" | "striped" | "default" | 視覚バリアント（linearのみ） |
color | "default" | "primary" | "default" | インジケーターの色（default: ダーク、primary: プライマリー） |
indicatorClassName | string | undefined | インジケーターのカスタムクラス（colorを上書き） |
showValue | boolean | false | パーセント値を表示 |
formatLabel | (value: number, max: number) => string | undefined | 値のカスタムフォーマッター |
animated | boolean | false | ストライプの流れアニメーション（striped variant時のみ） |
thickness | number | undefined | 円形のストローク幅（circularのみ） |
label | string | undefined | アクセシビリティラベル |
className | string | undefined | 追加のCSSクラス |
Anatomy
Linear
Track
1
2
3
60%Circular
1
2
3
60%1
Track
背景トラック
2
Indicator
進捗バー / アーク
3
Value
パーセンテージ（任意）
Best Practices
✓
推奨
- ✓進捗が明確な場合はdeterminateモードを使用する
- ✓長時間の処理にはshowValueで進捗率を表示する
- ✓ステータスに適したcolorを使用する（例: error=失敗）
✕
避けるべき
- ✕進捗がないのにProgressを使わない — Spinnerを使用する
- ✕1ページに大量のProgressバーを表示しない
- ✕ユーザーアクション後のフィードバックにProgressを使わない — Toastを使用する
Accessibility
ARIA / WCAG
role="progressbar"自動付与aria-valuenow/aria-valuemaxlabelpropでカスタムラベル