Loader

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

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.

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

Double Loader

A visually heavier loader animation.

Loading...
<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.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<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>
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<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.

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<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>
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
<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

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

Flexbox

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

Floats

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

Text alignment

Loading...
<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" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="loader-circle" role="status" aria-hidden="true"></span>
Loading...
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="loader-double" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="loader-double" role="status" aria-hidden="true"></span>
Loading...
</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 / 2) 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.