Multi progress bar

Bulma’s progress element shows a single value. The multi progress bar shows several values side by side, each with its own color, like Bootstrap’s stacked progress bars. It is typically used for the status breakdown of a process: done, running, failed, pending…

A multi progress bar showing the done, running, failed and pending tasks of a process
See the multi progress bar in context on the demo page, in both light and dark themes.

Usage

A .multi-progress container holds one .progress-block per value. The width of each block is set with the flex property:

<div class="multi-progress" title="796 done, 102 running, 38 failed, 348 pending">
  <div class="progress-block is-success" style="flex: 0 0 62%"></div> (1)
  <div class="progress-block is-info" style="flex: 0 0 8%"></div>
  <div class="progress-block is-danger" style="flex: 0 0 3%"></div>
</div> (2)
1 flex: 0 0 62%: the block neither grows nor shrinks, and takes exactly 62% of the bar.
2 The remaining 27% shows the empty track: here, the pending tasks.

Sizing the blocks

The container is a flexbox, and blocks have flex: 1 by default: without any style, they share the bar equally. There are two ways to size them:

With percentages

style="flex: 0 0 <percent>%", as above. The blocks do not need to fill the whole bar: the rest shows the empty track, which reads as "not done yet".

With counts

style="flex-grow: <count>", without any computation: the blocks always fill the whole bar, proportionally to their counts.

<div class="multi-progress">
  <div class="progress-block is-success" style="flex-grow: 796"></div>
  <div class="progress-block is-info" style="flex-grow: 102"></div>
  <div class="progress-block is-danger" style="flex-grow: 38"></div>
  <div class="progress-block is-soft" style="flex-grow: 348"></div>
</div>

A block with a count of 0 has no width, so it can be left in the markup.

Colors

Blocks accept every Bulma color modifier: is-primary, is-link, is-info, is-success, is-warning, is-danger, is-dark, is-light… A block without modifier uses the text color.

The is-soft modifier gives a neutral grey block, which follows the light and dark themes: use it for a "pending" or "unknown" part that must be visible, unlike the empty track.

Rounded corners

The bar and its blocks are fully rounded. Only the outer corners of the first and last blocks are rounded, so the blocks join into a single bar.

Height

The bar is 1rem high (--bulma-size-normal). Change it with the height property:

<div class="multi-progress" style="height: 0.5rem">...</div>

Like any Bulma block, the bar has a bottom margin when it is not the last child of its parent.

Legend and accessibility

The bar is made of plain <div> elements: it carries no meaning for screen readers, nor any text for the user. Always give the values in text, for example in a title attribute and a legend, using color squares:

<div class="multi-progress mb-2" role="img" aria-label="796 done, 102 running, 38 failed, 348 pending">
  <div class="progress-block is-success" style="flex: 0 0 62%"></div>
  <div class="progress-block is-info" style="flex: 0 0 8%"></div>
  <div class="progress-block is-danger" style="flex: 0 0 3%"></div>
</div>
<p class="is-size-7">
  <span class="color-square has-background-success"></span> 796 done ·
  <span class="color-square has-background-info"></span> 102 running ·
  <span class="color-square has-background-danger"></span> 38 failed ·
  <span class="color-square has-background-grey-lighter"></span> 348 pending
</p>

Updating it dynamically

Block widths are plain inline styles, so they can be updated from JavaScript, for example to preview a dataset split:

const blocks = document.querySelectorAll('#split-bar .progress-block')
const values = [80, 10, 10] // train, validation, test

blocks.forEach((block, index) => {
  block.style.flex = `0 0 ${values[index]}%`
})