Progress Bar | Bulma-Gomponents

Progress Bar

The b.Progress constructor creates a progress bar.

Modifier	Action
`b.White`	Set color to white
`b.Black`	Set color to black
`b.Light`	Set color to light
`b.Dark`	Set color to dark
`b.Primary`	Set color to primary
`b.Link`	Set color to link
`b.Info`	Set color to info
`b.Success`	Set color to success
`b.Warning`	Set color to warning
`b.Danger`	Set color to danger
`b.Small`	Set size to small
`b.Normal`	Set size to normal
`b.Medium`	Set size to medium
`b.Large`	Set size to large

The b.ProgressIndeterminate constructor creates an indeterminate progress bar. It accepts the same modifiers as b.Progress.

Bulma examples

Bulma documentation

Example

Code

b.Progress(15, 100, "15%")

ResultHTML

15%

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

Colors

Bulma documentation

Example

Code

b.Progress(15, 100, b.Primary, "15%")

ResultHTML

15%

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

Example

Code

b.Progress(30, 100, b.Link, "30%")

ResultHTML

30%

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

Example

Code

b.Progress(45, 100, b.Info, "45%")

ResultHTML

45%

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

Example

Code

b.Progress(60, 100, b.Success, "60%")

ResultHTML

60%

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

Example

Code

b.Progress(75, 100, b.Warning, "75%")

ResultHTML

75%

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

Example

Code

b.Progress(90, 100, b.Danger, "90%")

ResultHTML

90%

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

Sizes

Bulma documentation

Example

Code

b.Progress(20, 100, b.Small, "20%")

ResultHTML

20%

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

Example

Code

b.Progress(40, 100, b.Normal, "40%")

ResultHTML

40%

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

Example

Code

b.Progress(60, 100, b.Medium, "60%")

ResultHTML

60%

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

Example

Code

b.Progress(80, 100, b.Large, "80%")

ResultHTML

80%

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

Indeterminate

Bulma documentation

Example

Code

b.ProgressIndeterminate(b.Small, b.Primary, "15%"),
b.ProgressIndeterminate(b.Danger, "30%"),
b.ProgressIndeterminate(b.Medium, b.Dark, "45%"),
b.ProgressIndeterminate(b.Large, b.Info, "60%")

ResultHTML

15%30%45%60%

<progress class="progress is-small is-primary" max="100">15%</progress>
<progress class="progress is-danger" max="100">30%</progress>
<progress class="is-dark progress is-medium" max="100">45%</progress>
<progress class="progress is-large is-info" max="100">60%</progress>