Progress
プログレスバーを使用するためのドキュメントと例を示します。
How it works
the HTML5 <progress>
element は, 2つのHTML要素, 幅を設定するCSS, いくつかの属性で構築されています。
.progress
は最大値を示すラッパーとして使用します。
.progress-bar
はこれまで進捗状況を示すために使用します。
.progress-bar
の幅を設定するには, インラインスタイル, ユーティリティクラス, カスタムCSSが必要です。
.progress-bar
は role
属性, aria
属性が必要です。
下記をご覧ください。
utilities for setting width を提供しています。
Labels
.progress-bar
内にテキストを配置して, プログレスバーにラベルを追加します。
Height
.progress
にのみ height
の値を設定します。値を変更すると, .progress-bar
はそれに応じて自動的にサイズが変更します。
Backgrounds
下記のように色を設定できます。
Multiple bars
プログレスバーに複数のプログレスバーを含めることができます。
Striped
.progress-bar-striped
に .progress-bar
を追加してストライプを適用できます。
Animated stripes
CSS3アニメーションを使用して右から左にストライプをアニメーション化するには, .progress-bar-animated
を .progress-bar
に適用します。