Progress

Progress bars provide users with feedback regarding the duration and progression of a process. Depending on the type used, they can indicate how long a user will be waiting or simply that the system is processing something.

Code

Variants

Determinate

Show example

Toggle dark mode

<div class="progress">
  <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:25%">
    <span class="sr-only">25% Complete</span>
  </div>
</div>

Indeterminate

Loading…

Toggle dark mode

<div class="progress is-indeterminate">
  <div class="progress-bar progress-bar-animated progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <span class="sr-only">Loading…</span>
  </div>
</div>