A simple, light weight jQuery AJAX Loading Overlay Plugin with loading text

Category: JavaScript/jQuery Plugins Loading Recommended | September 6, 2021
Author: jgerigmeyer
Official Page: Go to website
Last Update: September 6, 2021
License: MIT

jQuery AJAX Loading Overlay Plugin with loading text

Description:

jQuery Loading Overlay plugin is a simple, light weight and easy to implement in your existing or new projects. It allows you to set loading spinner and loading text to a targeted element, and there are options available for class selectors and loading overlay text.

If you are using AJAX requests in your project then, its can be useful for you.

Features:

  1. You can set loading text and loading spinner.
  2. Options available for class and id selector.
  3. You can customize overlay via CSS.

You may also like:

How can I use it?

First, download the plugin and include the loading-overlay.min.js file in your page.

<script src="js/jquery.min.js"></script>
<script src="js/loading-overlay.min.js"></script>

Then, create a div element where you will show the loading overlay with spinner and text.

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

Create a toggle button that will show/hide loading overlay.

<button class="toggle-loading">Toggle Overlay</button>

Style your web page as per demo.

@font-face {
  font-family: "demo";
  src: url('fonts/icons.woff') format("woff"), url('fonts/icons.ttf') format("truetype");
}

@keyframes loadingStart {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  position: relative;
  pointer-events: none;
}

#css-input:checked ~ .loading .loading-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-animation: loadingStart 3s 300ms linear 1 both;
  -moz-animation: loadingStart 3s 300ms linear 1 both;
  -o-animation: loadingStart 3s 300ms linear 1 both;
  animation: loadingStart 3s 300ms linear 1 both;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
}
#css-input:checked ~ .loading .loading-text {
  font-size: 0.875rem;
  line-height: 1.3125rem;
  text-shadow: white 0 0 1em, white 0 0 0.5em, white 0 0 0.25em;
  position: relative;
  display: block;
  text-transform: uppercase;
  font-weight: bold;
}
#css-input:checked ~ .loading .loading-text:after {
  content: "...";
}
#css-input:checked ~ .loading .loading-spinner {
  position: absolute;
  top: 50%;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3.9375rem auto 0;
  color: #1a1d1d;
  text-align: center;
}
#css-input:checked ~ .loading .loading-icon {
  font-size: 4.8125rem;
  line-height: 5.25rem;
  text-shadow: rgba(255, 255, 255, 0.75) 0 0 0.5em;
  -webkit-animation: loading 1s steps(4) infinite;
  -moz-animation: loading 1s steps(4) infinite;
  -o-animation: loading 1s steps(4) infinite;
  animation: loading 1s steps(4) infinite;
  display: block;
  vertical-align: middle;
}
#css-input:checked ~ .loading .loading-icon:before {
  vertical-align: middle;
  content: "\e000";
  font-family: "demo";
}

The JavaScript code.

  <script>
  jQuery(function ($) {
    var target = $('#target');
    $('.toggle-loading').click(function () {
      if (target.hasClass('loading')) {
        target.loadingOverlay('remove');
      } else {
        target.loadingOverlay();
      };
    });
  });
  </script>

Available options, explicitly set to their defaults.

$('#target').loadingOverlay({
  loadingClass: 'loading',          // Class added to target while loading
  overlayClass: 'loading-overlay',  // Class added to overlay (style with CSS)
  spinnerClass: 'loading-spinner',  // Class added to loading overlay spinner
  iconClass: 'loading-icon',        // Class added to loading overlay spinner
  textClass: 'loading-text',        // Class added to loading overlay spinner
  loadingText: 'loading'            // Text within loading overlay
});

Change log:

  • 1.0.2 – (02/19/2014) Add bower.json
  • 1.0.1 – (10/13/2013) Don’t allow duplicate loading-overlays
  • 1.0.0 – (10/11/2013) Initial release