Performance-focused pure css and svg loading animations.
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>
<!-- 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>
Add class .full-overlay-target
to raise the highest z-index level. And add class .show
to div.full-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>
<div class="full-overlay">
<div class="full-overlay-mask">
<span class="loader-umbler loader-2x"></span>
</div>
</div>
Add class .full-overlay-wrapper
in parent element.
<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>