进度条（Progress Bar）

本机HTML进度条

1

Bulma进度条是一个简单的CSS类，用于设置本机<progress>HTML元素的样式。<progress>。

Example

15%

HTML 

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

1.颜色

进度条元素有$colors Sass映射定义的所有不同颜色。

Example

15%

HTML 

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

Example

30%

HTML 

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

Example

45%

HTML 

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

Example

60%

HTML 

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

Example

75%

HTML 

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

Example

90%

HTML 

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

2.大小

Example

20%

HTML 

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

Example

40%

HTML 

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

Example

60%

HTML 

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

Example

80%

HTML 

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

3.不确定的进度条-滚动进度条

如果不设置HTML值 value属性，则可以显示不确定的进度条。它用来表示正在取得一些进展，但是总的持续时间还没有确定。

Example

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>

4.变量

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

返回头部

23222

问题反馈
返回顶部