Loaders

Sizes

A simple yet versatile animated spinner component. Add .loader-[sm|lg] or .is-loading-[sm|lg] to create loaders at different sizes.

Colors

Using Bootstrap’s typical naming structure i.e. .loader-primary, you can create colored loaders depending on your needs.

Loader Helper

Indicate loading state of nearly any component with an .is-loading modifier.

Loading card

Loading content
<!-- Buttons -->
<a href="#" class="btn btn-lg btn-primary is-loading">Button</a>
<a href="#" class="btn btn-outline-primary is-loading is-loading-sm">Button</a>

<!-- Loading card -->
<div class="card">
  <div class="card-header">
    <h4 class="card-title">Loading card</h4>
  </div>
  <div class="card-body is-loading is-loading-lg">
    Loading content
  </div>
</div>