Progress Bar

Native HTML progress bars

The Bulma progress bar is a simple CSS class that styles the native <progress> HTML element.

示例

15%

HTML 

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

Colors #

The progress bar element is available in all the different colors defined by the $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>

Sizes #

示例

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>

Indeterminate #

If you don't set the HTML value attribute, you can display an indeterminate progress bar. It's used to show that some progress is going on, but the total duration is not yet determined.

示例

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