jQuery Loading Overlay Demo

Uses Javascript to add/remove a loading overlay to a target element. It can be called on any element that should receive the loading overlay, and accepts options for class selectors and loading overlay text. The overlay itself must be styled via CSS.

Javascript:

$('.add-loading').click(function () {
  target.loadingOverlay();
});
$('.remove-loading').click(function () {
  target.loadingOverlay('remove');
});
        

HTML without overlay:

<div id="target"></div>

HTML with overlay:

<div id="target" class="loading">
  <div class="loading-overlay">
    <p class="loading-spinner">
      <span class="loading-icon"></span>
      <span class="loading-text">loading</span>
    </p>
  </div>
</div>