Bulma 进度条是一个简单的 CSS 类，用于设置原生 <progress> HTML 元素 的样式。
赞助商
进度条
原生 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 变量
|
值
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|