Loaders

Performance-focused pure css and svg loading animations.

Loaders icons

In addition you have the class .is-inverted for dark’s backgrounds.

<span class="loader-umbler"></span>
<span class="loader-umbler loader-2x"></span>
<span class="loader-umbler loader-3x"></span>
<span class="loader-umbler loader-2x is-inverted"></span>

Elements with loader

Loading site...

Card title

Some quick example text to build on the card's content.

button

<!-- button -->
<button type="button" class="btn btn-secondary btn-block is-loading">Loading</button>
<button type="button" class="btn btn-primary btn-block is-loading">Loading</button>
<button type="button" class="btn btn-success btn-block is-loading">Loading</button>
<button type="button" class="btn btn-warning btn-block is-loading">Loading</button>
<button type="button" class="btn btn-danger btn-block is-loading">Loading</button>
<div class="text-muted p-3 font-italic"><span class="loader-umbler mr-2"></span>Loading site...</div>

<!-- card -->
<div class="card full-overlay-wrapper show">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card's content.</p>
    <a href="#" class="btn btn-secondary">button</a>
  </div>
  <div class="full-overlay-mask">
    <span class="loader-umbler loader-2x"></span>
  </div>
</div>

Element overlay

Add class .full-overlay-target to raise the highest z-index level. And add class .show to div.full-overlay

Card title

Some quick example text to build on the card's content.

Toogle class overlay

Card title

Some quick example text to build on the card's content.

Toogle class overlay

<div class="row">
  <div class="full-overlay-wrapper show"></div>
  <div class="col-md-6">
    <div class="card full-overlay-target"> 
      ...
    </div>
  </div> 
</div>

Full overlay

Show full overlay

<div class="full-overlay">
  <div class="full-overlay-mask">
    <span class="loader-umbler loader-2x"></span>
  </div>
</div>

Overlay relative

Add class .full-overlay-wrapper in parent element.

Card title

Some quick example text to build on the card's content.

button

Card title

Some quick example text to build on the card's content.

button

<div class="full-overlay-wrapper show">
  <div class="full-overlay-mask"></div>
  <div class="row">
    <div class="col-md-6">
      <div class="card"> 
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card's content.</p>
          <a href="#" class="btn btn-primary">button</a>
        </div>
      </div>
    </div> 
    <div class="col-md-6">
      <div class="card full-overlay-target"> 
        <div class="card-block">
          <h4 class="card-title">Card title</h4>
          <p class="card-text">Some quick example text to build on the card's content.</p>
          <a href="#" class="btn btn-primary">button</a>
        </div>
      </div>
    </div>
  </div>
</div>