Bulmaのプログレスバーは、ネイティブな<progress>HTML要素をスタイルするシンプルなCSSクラスです。
スポンサー
プログレスバー
ネイティブHTML progressバー
例
HTML
<progress class="progress" value="15" max="100">15%</progress>色 #
プログレスバー要素は、$colors Sassマップで定義されたすべての異なる色で利用できます。
例
HTML
<progress class="progress is-link" value="15" max="100">
15%
</progress>例
HTML
<progress class="progress is-primary" value="30" max="100">
30%
</progress>例
HTML
<progress class="progress is-info" value="45" max="100">
45%
</progress>例
HTML
<progress class="progress is-success" value="60" max="100">
60%
</progress>例
HTML
<progress class="progress is-warning" value="75" max="100">
75%
</progress>例
HTML
<progress class="progress is-danger" value="90" max="100">
90%
</progress>サイズ #
例
HTML
<progress class="progress is-small" value="20" max="100">
20%
</progress>例
HTML
<progress class="progress is-normal" value="40" max="100">
40%
</progress>例
HTML
<progress class="progress is-medium" value="60" max="100">
60%
</progress>例
HTML
<progress class="progress is-large" value="80" max="100">
80%
</progress>不確定 #
HTML value属性を設定しない場合は、不確定なプログレスバーを表示できます。これは、何らかの進行が行われているが、合計期間がまだ決定されていないことを示すために使用されます。
例
HTML
<progress class="progress is-small is-primary" max="100">15%</progress>
<progress class="progress is-danger" max="100">30%</progress>
<progress class="progress is-medium is-dark" max="100">45%</progress>
<progress class="progress is-large is-info" max="100">60%</progress>SassとCSS変数 #
|
Sass変数
|
CSS変数
|
値
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|