Progress

処理の進捗状況を視覚的に表示するプログレスバーコンポーネント。サイズ・カラー・ラベル対応。

GitHub でソースを見る

プレビュー

サイズ

カラー

ラベル付き

アップロード中...72%

使いどころ

使う場面

  • アップロード、書き出し、セットアップなど、終わりに向かって進む作業の進み具合
  • value と max で割合を出す。showValue を付けると % を表示する
  • ステップ数が決まっている手順の全体像は Stepper と併用してよい

使わない場面

  • 容量の使用量や予算の消化など、上限に対する現在の量。Meter を使う（Progress は終われば満タンになる、Meter は範囲内のどこにあるかを示す）
  • 終わりが分からない読み込み。Skeleton を使う
  • 複数ステップの現在地。Stepper を使う
  • 数値の比較や内訳。BarChart、CategoryBar を使う

使い方

<Progress value={72} label="アップロード中..." showValue />
<Progress value={45} tone="warning" size="lg" />

プロパティ

名前型デフォルト説明
value必須numberなし進捗値（0〜100）
maxnumberなし最大値
labelstringなしバーの上に表示するラベルテキスト
showValuebooleanfalseパーセンテージ値を表示するかどうか
tone"default" | "positive" | "negative" | "warning" | "info""default"バーの意味色（旧 color）
size"sm" | "md" | "lg""md"プログレスバーの高さ

型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。

アクセシビリティ

  • role="progressbar" と aria-valuenow / aria-valuemin(0) / aria-valuemax が付く。aria-label には label が使われる
  • label を省くと名前のない進捗バーになる。画面上の見出しで足りない場合も label を渡す
  • 値の更新ごとに読み上げられるわけではない。完了や失敗は Toast や Alert でも伝える

文言

  • label は何の進み具合かを書く（「画像をアップロード中」「データを書き出し中」）
  • 完了後は Progress を残さず、結果の文言に置き換える

関連するコンポーネント