进度条

原生 HTML 进度

Bulma 进度条是一个简单的对原生的 HTML 元素 <progress> 进行了美化的 CSS 类.

示例

15%

HTML

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

颜色 #

进度条元素提供所有 $colors Sass map 中定义的各种不同的颜色

示例

15%

HTML

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

示例

30%

HTML

<progress class="progress is-link" value="30" max="100">30%</progress>

示例

45%

HTML

<progress class="progress is-info" value="45" max="100">45%</progress>

示例

60%

HTML

<progress class="progress is-success" value="60" max="100">60%</progress>

示例

75%

HTML

<progress class="progress is-warning" value="75" max="100">75%</progress>

示例

90%

HTML

<progress class="progress is-danger" value="90" max="100">90%</progress>

型号 #

示例

20%

HTML

<progress class="progress is-small" value="20" max="100">20%</progress>

示例

40%

HTML

<progress class="progress is-normal" value="40" max="100">40%</progress>

示例

60%

HTML

<progress class="progress is-medium" value="60" max="100">60%</progress>

示例

80%

HTML

<progress class="progress is-large" value="80" max="100">80%</progress>

不定值 #

如果您没有设定 HTML 的 value 属性,就会看到一个处于 不定值 状态的进度条。这种状态常用于显示某些进行中但是总长度没确定时的状态。

示例

15% 30% 45% 60%

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-color
variable
$border-light
hsl(0, 0%, 93%)
color
$progress-value-background-color
variable
$text
hsl(0, 0%, 29%)
color
$progress-border-radius
variable
$radius-rounded
9999px
size
$progress-indeterminate-duration
string
1.5s
$progress-colors
variable
$colors
Bulma colors
map

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!