jQuery Plugin To Add A Loading Overlay On Any Elements - Loading

Loading is a small jQuery plugin that allows you to create an animated overlay covering any Html elements to indicate the loading status. Great for content preloader or dynamic content loaded via Ajax.

Basic Usage:

1. Include the jQuery loading.js after jQuery javascript library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/loading.js"></script>

2. Create an element for the loading overlay.

<div id="demo" class="loading-div">
  This div is always loading 
</div>

3. The CSS styles for the loading overlay content.

.loading-overlay-content {
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: 1.15em;
  font-weight: bold;
}

4. Customizable styles for the loading overlay. You can easily add your own themes in the CSS as follows.

.loading-overlay.loading-theme-dark {
  background-color: #000;
  color: #fff;
}

.loading-overlay.loading-theme-light {
  background-color: #fff;
  color: #000;
}

.loading-overlay.loading-theme-green {
  background-color: #2ecc71;
  color: #fff;
}

4. Set the height & width for the loading overlay.

.loading-div {
  height: 180px;
  padding: 15px 25px;
  color: #eee;
}

5. Initialize the plugin with one JS call.

$('#loading-always').loading();

6. All the options and callback functions.

/**
 * jQuery element to be used as overlay
 * If not defined, a default overlay will be created
 */
overlay: undefined,

/**
 * z-index to be used by the default overlay
 * If not defined, a z-index will be calculated based on the
 * target's z-index
 * Has no effect if a custom overlay is defined
 */
zIndex: undefined,

/**
 * Message to be rendered on the overlay content
 * Has no effect if a custom overlay is defined
 */
message: "Loading...",

/**
 * Theme to be applied on the loading element
 *
 * Some default themes are implemented on `jquery.loading.css`, but you can
 *  define your own. Just add a `.loading-theme-my_awesome_theme` selector
 *  somewhere with your custom styles and change this option
 *  to 'my_awesome_theme'. The class is applied to the parent overlay div
 *
 * Has no effect if a custom overlay is defined
 */
theme: "light",

/**
 * Class(es) to be applied to the overlay element when the loading state is started
 */
shownClass: "loading-shown",

/**
 * Class(es) to be applied to the overlay element when the loading state is stopped
 */
hiddenClass: "loading-hidden",

/**
 * Set to true to stop the loading state if the overlay is clicked
 * This options does NOT override the onClick event
 */
stoppable: false,

/**
 * Set to false to not start the loading state when initialized
 */
start: true,

/**
 * Function to be executed when the loading state is started
 * Receives the loading object as parameter
 *
 * The function is attached to the `loading.start` event
 */
onStart: function(loading) {
  loading.overlay.fadeIn(150);
},

/**
 * Function to be executed when the loading state is stopped
 * Receives the loading object as parameter
 *
 * The function is attached to the `loading.stop` event
 */
onStop: function(loading) {
  loading.overlay.fadeOut(150);
},

/**
 * Function to be executed when the overlay is clicked
 * Receives the loading object as parameter
 *
 * The function is attached to the `loading.click` event
 */
onClick: function() {}

7. API methods.

• resize: Recalculate and apply new dimensions and position to the overlay, based on the state of the target element. Call this method if the the overlay is not being shown on the right position and/or dimensions. 
• start: Turn on the loading state of some element. 
• stop: Turn off the loading state of some element.
• toggle: Turn on or off the loading state of some element, depending of the current state.
• options: Change some element's loading options at runtime.
• $.Loading.setDefaults: Extend the Loading plugin default options.
• :loading selector: Get the elements that are loading or check if some element is loading.

Changelog:

v2.0.0 rc2 (2019-08-13)

• Update

2017-12-09

• v1.3.0: Destroying old overlay instance when called with new settings

2016-11-02

• v1.2.0

2015-10-18

• Added 'zIndex' option

v1.1.0 (2015-08-23)

• new config options on subsequent calls

2014-07-05

• update to v1.0.3

2014-06-30

• Added 'start' option to define wheter start or not the loading state on initialization

---

This awesome jQuery plugin is developed by CarlosBonetti. For more Advanced Usages, please check the demo page or visit the official website.