UI Component Lab English

← コンポーネント一覧

フィードバック

Progress bar プログレスバー

アップロードなどの作業がどこまで進んだかを、伸びていく棒で示す部品。

別名

見分けるポイント

細い横長の溝が左から右へ色で埋まっていく。近くに割合やラベルが表示されることが多い。

バリエーション

不確定
終わるまでの時間が分からないときに、動く帯などで作業中であることだけを示すもの。value 属性を省くとこの状態になる。

挙動

  • 作業が進むと塗られた部分が伸び、終わると端まで届く。
  • 操作する部品ではなく、見るだけのもの。
  • このデモはネイティブの <progress> 要素と <label> を使っている。途中の割合をすべて読み上げないよう、完了だけを知らせる。

キーボード操作

キー動作
—なし。デモの開始ボタンは Enter / Space で押せる。

使い分け・注意点

  • フォームの手順の進み具合を示すのには使わない。それにはステップナビゲーションを使う。
  • スピナー: プログレスバーは作業の進み具合を示し、スピナーは処理中であることだけを示す。
  • メーター: プログレスバーは作業の進み具合を示し、メーターはディスク使用量のように決まった範囲の中の測定値を示す。
  • ステップナビゲーション: プログレスバーは1つの作業の進み具合を示し、ステップナビゲーションは複数画面にまたがる手続きのどの段階にいるかを示す。

出典