Progress

処理の進み具合を示します。終わりが分からない処理にも使えます。

少しだけ進んだ
狭い場所で折り返す
右から左に読む場合

使いどころ

  • 送信や書き出しなど、時間のかかる処理がどこまで進んだかをバーで示す時に使います。
  • 作業量が分からない継続処理も、value を省いたProgressで示します。
  • 短い読み込みを言葉で示す時は Loading、ボタンを押した後の待ちは Button の busy を使います。
  • 手順の中の今の段階を示す時は Steps を使います。

使い方

label に処理の名前、value に終えた量、max に全体の量を渡します。バーの上に12pxの処理の名前と、末尾側に割合を11pxの茶色の太字で書きます。バーは暖かい灰色(#dcd9d2)の平らな細い溝(高さ7px、端は四角。Basecamp 2のProgressの見出しの下の帯と同じ形)に、実際の割合の長さで描きます。沈んだ影は付けません。

value は0〜max に収めます。割合は0.1%単位で切り捨てて書き、max に達するまでは100%と書かずに99.9%で止めます。0より大きく0.1%に満たない時は「<0.1%」と書きます。

バーは平らな青緑で塗り、value が max に達すると平らな緑になります。

value を省くと、終わりが分からない表示になり、割合を書かずに、37signalsのサインインの待ちの帯と同じく、溝いっぱいに緑と淡い緑の斜めの縞を描きます。縞は動きません。進んだ量を示す一本のバーと形を変えて、量が分からないことを示します。経過時間から割合を作りません。

進み具合を変える時は、利用側で新しい value で描き直します。JavaScriptは使いません。

アクセシビリティ

  • 標準の progress 要素を見えない形で持ち、label 要素で処理の名前と結びます。読み上げは progress の値で行い、見える割合の文字は読み上げから外します。
  • 終わりが分からない時は、progress を値の無い状態にします。
  • 終わりが分からない表示も動かないので、動きを減らす設定でも見た目は変わりません。

API

Progress

Progressのprops
名前型既定値説明
label必須string処理の名前(「添付ファイルを送信しています」など)。バーの上に書き、進捗の読み上げ名にもする。
valuenumber終えた量。0〜maxに収めて描く。省略するか有限でない値を渡すと、進捗が分からない状態の表示になる。 max以上の時だけ完了として100%と書き、それまでは0.1%単位で切り捨てて99.9%で止める。
maxnumber100全体の量。0以下や有限でない値は1として扱う。

ほかに、<label>へ標準のHTML属性を渡せます。

読み込むCSS:layers.css、reset.css、tokens.css、base.css、layout.css、components/progress.css

コード

HTML
Hono JSX