Loader

Indicate a busy or loading state for content or component with a loading animation, sometimes called "spinners", using only HTML and CSS.

Page Contents

About

Loaders, or "spinners", are useful for showing a busy or loading state when applicable. While they are built using only HTML and CSS, but you may need some custom JavaScript to toggle their visibility.

By default the loaders border color inherit from the current text color using border-color: currentcolor. The size, color, and alignment can be further adjusted through the use of utility classes.

For accessibility the loader should use a role="status" attribute. If a visible message is not being provided, a screen reader friendly message should be included. Something as simple as <span class="sr-only">Loading...</span> contained within the loader element will suffice.

Circle Loader

A lightweight loader animation.

<div class="loader-circle" role="status">
  <span class="sr-only">Loading...</span>
</div>

Double Loader

A visually heavier loader animation.

<div class="loader-double" role="status">
  <span class="sr-only">Loading...</span>
</div>

Customize

Change the size or color of the loader using utility classes.

Size

Use font size utilities to adjust the loader size.

<div class="loader-circle fs-xsmall" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle fs-small" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle fs-large" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle fs-xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle fs-2xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle fs-3xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle fs-5xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="loader-double fs-xsmall" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double fs-small" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double fs-large" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double fs-xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double fs-2xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double fs-3xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double fs-5xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>

Color

Use text color utilities to control the loader color.

Use .text-{color} utility classes instead of the border-{color} ones because the loaders make use of border-color: currentcolor on their pseudo-elements. Using .border-{color} utilities will not result in a color change.

<div class="loader-circle text-primary fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle text-secondary fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle text-success fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle text-info fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle text-warning fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle text-danger fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle text-light fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-circle text-dark fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>

<div class="loader-double text-primary fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double text-secondary fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double text-success fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double text-info fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double text-warning fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double text-danger fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double text-light fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="loader-double text-dark fs-4xlarge" role="status">
  <span class="sr-only">Loading...</span>
</div>

Alignment

Margin, flexbox, floating, text alignment utilities can be used to adjust spacing or placement.

Margin

<div class="loader-circle fs-4xlarge m-2" role="status">
  <span class="sr-only">Loading...</span>
</div>

Flexbox

<div class="d-flex flex-center">
  <div class="loader-circle fs-4xlarge" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Loading...

<div class="d-flex flex-column flex-items-center">
  <div class="loader-circle fs-4xlarge" aria-hidden="true"></div>
  <strong role="status">Loading...</strong>
</div>

Loading...

<div class="d-flex flex-items-center flex-between">
  <strong role="status">Loading...</strong>
  <div class="loader-circle fs-4xlarge" aria-hidden="true"></div>
</div>

Floats

<div class="clearfix">
  <div class="loader-circle fs-4xlarge float-end" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Text alignment

<div class="text-center">
  <div class="loader-circle fs-4xlarge" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

Buttons

Use loaders within buttons to indicate that an action is taking place.

<button class="btn btn-primary" type="button" disabled>
  <span class="loader-circle" aria-hidden="true"></span>
  <span class="sr-only" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="loader-circle" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
  <span class="loader-double" aria-hidden="true"></span>
  <span class="sr-only" role="status">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="loader-double" aria-hidden="true"></span>
  <span role="status">Loading...</span>
</button>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for jumbotrons.

Name	Type	Default	Description
`$enable-loader`	boolean	`true`	Enable the generation of the loader classes. Smaller segements of the loader classes can be disabled with the following `$enable-*` variables.
`$enable-loader-circle`	boolean	`true`	Enable the generation of the circular loader.
`$enable-loader-double`	boolean	`true`	Enable the generation of the double loader.
`$loader-circle-size`	string	`1em`	Width and height, defining the diameter, of the circular loader.
`$loader-circle-border-width`	string	`3px`	Border width of the loader.
`$loader-circle-alt-opacity`	string	`.25`	Opacity of the background loader border.
`$loader-circle-vertical-align`	string	`($loader-circle-border-width * -.5)`	Vertical alignment adjustment for the loader.
`$loader-circle-animation-speed`	string	`1s`	Time duration for the circular animation to perform one revolution. For users with a reduced motion preference, the animation duration will double.

Mixins

No mixins available.