Loaders and spinners

A loader is an element that wraps around any element to indicate that it hasn't fully initialized; the loader wrapper gives a faded look to the element while an animated spinner icon indicates that the element is loading.

• Loader component
  • Loader with small spinner size variation
• Spinners

---

Loader component

To use a loader, simply wrap any kind of element inside a container with the combined class loader loading as shown in the example below. After the element enclosed ini the loader initializes, the loading class should be removed.

The loader class should be defined using the appropriate html element depending on display property of the enclosed element. It should be defined using a <div> when wrapping block or table elements or using a <span> when wrapping inline elements.

Code output

HTML Markup

Copy<div class="loader loading">
  <!-- any block or table element -->
</div>
<span class="loader loading">
  <!-- any inline element -->
</span>

---

Loader with small spinner size variation

For smaller inline elements, a loader with a smaller spinner can be used, by applying a loader-sm class, as shown below.

Code output

Loading Loading

HTML Markup

Copy<span class="loader-sm loading">
<!-- any small element -->
</span>

---

Spinners

Spinners can be used on their own, in both size variations as follows:

Code output

  

HTML Markup

Copy<span class="spinner"></span> <!--normal size-->
<span class="spinner-sm"></span> <!--small size-->