Bulma 进度条是一个简单的对原生的 HTML 元素 <progress> 进行了美化的 CSS 类.
进度条
原生 HTML 进度条
示例
HTML
<progress class="progress" value="15" max="100">15%</progress>颜色 #
进度条元素提供所有 $colors Sass map 中定义的各种不同的颜色。
示例
HTML
<progress class="progress is-primary" value="15" max="100">15%</progress>示例
HTML
<progress class="progress is-link" 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>Variables #
Name
Type
Value
Computed Value
Computed Type
$progress-bar-background-colorvariable
$border-lighthsl(0, 0%, 93%)color
$progress-value-background-colorvariable
$texthsl(0, 0%, 29%)color
$progress-border-radiusvariable
$radius-rounded9999pxsize
$progress-indeterminate-durationstring
1.5s$progress-colorsvariable
$colorsBulma colorsmap
此页面为开放源码页面。
发现排版问题？或者表达模糊？
在 GitHub 改进该页内容
