進捗バーProgress
Experimental

タスクの進捗を示すインジケーターです。

アップロード66%

残り 4 ファイルを処理しています。

状態とバリエーション

割合と補足文を近くに置いて、何の進捗かを明確にします。

アップロード66%

残り 4 ファイルを処理しています。

Progress は現在値を描画します。進行、停止、失敗、再試行などの処理状態は親側で管理し、近くのテキストと操作で伝えます。

ファイルアップロード28%

残り 5 ファイルを処理しています。

値が小さい場合もバーの高さと横幅は変えず、レイアウトを保ちます。

アップロード18%

キューを準備しています。

完了状態も同じコンポーネントで表し、文言で処理が終わったことを伝えます。

アップロード100%

すべてのファイルを処理しました。

容量や件数など、100以外の単位では max を指定します。

ストレージ42 / 64 GB

最大値が 100 以外の場合は max を指定します。

表は横にスクロールできます

プロパティ	型	初期値	説明
value	number	0	現在の進捗値です。
max	number	100	進捗の最大値です。value は max に対する割合で表示されます。
className	string	-	進捗バーのサイズや余白を調整するクラスです。