Skip to main content

Progress bars

Progress bars should be used when there is a determinate amount of time/progress related to a process (e.g., uploading a file). An indeterminate progress can be used in conjunction with a determinate progress bar.

Determinate progress bar

Importing...
45%
Example HTML usage: 
<!--Indeterminate progress bar-->
<div class="progress-label">Importing...</div>
<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    style="width: 25%"
    aria-valuenow="45"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    45%
  </div>
</div>

Indeterminate progress bar

Finalizing...
100%
Example HTML usage: 
<!--Indeterminate progress bar-->
<div class="progress-label">Finalizing...</div>
<div class="progress">
  <div
    class="progress-bar progress-bar-striped bg-primary"
    role="progressbar"
    style="width: 100%"
    aria-valuenow="45"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    100%
  </div>
</div>

Load spinners

Load spinners should be used when there is an indeterminate amount of time/progress related to a process (e.g., downloading data).

Load spinner

Example HTML usage: 
<!--Load spinner-->
<div class="overlay">
  <div class="md-preloader">
    <svg>
      <circle></circle>
    </svg>
  </div>
</div>

Size

Add .spinner-border-sm to make a smaller spinner that can quickly be used within other components.

Example HTML usage: 
<!-- Spinner size-->
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

Buttons

Use spinners within buttons to indicate an action is currently processing or taking place.

Example HTML usage: 
<!-- Spinner button-->
<button class="btn btn-primary" type="button" disabled>
  <span
    class="spinner-border spinner-border-sm"
    role="status"
    aria-hidden="true"
  ></span>
  <span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span
    class="spinner-border spinner-border-sm"
    role="status"
    aria-hidden="true"
  ></span>
  Loading...
</button>

Loading spinner examples

Full page loading

Inside container

Spinner for IE 11