Progress bars

HTML 原生进度条

Colors Yes

Sizes Yes

Variables Yes

15%

      <progress class="progress" value="15" max="100">15%</progress>
    

Colors | 颜色 #

30% 30% 45% 60% 75% 90%

      <progress class="progress is-primary" value="15" max="100">30%</progress>
<progress class="progress is-link" value="30" max="100">30%</progress>
<progress class="progress is-info" value="45" max="100">45%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>
<progress class="progress is-warning" value="75" max="100">75%</progress>
<progress class="progress is-danger" value="90" max="100">90%</progress>
    

Sizes | 尺寸 #

15% 30% 45% 60%

      <progress class="progress is-small" value="15" max="100">15%</progress>
<progress class="progress" value="30" max="100">30%</progress>
<progress class="progress is-medium" value="45" max="100">45%</progress>
<progress class="progress is-large" value="60" max="100">60%</progress>
    

Variables | 变量 #

你可以使用这些变量来 自定义 这些 element。只需要在导入 Bulma 之前设置这些变量学习如何开始.

Name	Default value
Name	Default value
`$progress-bar-background-color`	`$border`
`$progress-value-background-color`	`$text`

这是一个 开源项目. 错别字? Or 有疑问? 在GitHub上改进这个页面。

Bulma Partners

Check out their products!

Progress bars

HTML 原生 进度 条

Colors | 颜色 #

Sizes | 尺寸 #

Variables | 变量 #

HTML 原生进度条