Back to post

Jquery Loading - is a very useful and customizable plugin for loading. It can be used for a specific element on the page and on the entire page of the website.

Features:

Install with NPM

$ npm install --save jquery-easy-loading

Install with Bower

$ bower install jquery-loading

How to use it:

1. Include the Javascript jquery.loading.min.js at the bottom of the web page.

<script src="path/to/jquery.loading.min.js"></script>

2. Include the CSS loading.css in the header of the page.

<link rel="stylesheet" href="css/loading.css">

3. Add the basic HTML to the page.

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

4. Initialize the plugin and we're ready to go. 

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

Plugin's default options:

Option Default value Description
overlay - jQuery element to be used as overlay. If not informed, the plugin will create a default one
message Loading... Message to be rendered on the overlay content. Has no effect if a custom ovelay was informed
theme light Theme to be used for the overlay element. Some default themes are defined on the jquery.loading.css file (include it if you want to use the default themes). Has no effect if a custom ovelay was informed
shownClass loading-shown Class(es) to be applied to the overlay element when the loading state is started
hiddenClass loading-hidden Class(es) to be applied to the overlay element when the loading state is stopped
stoppable false Setting this option to true will make the loading state be stopped if the overlay element is clicked by the user. This option does not override the onClick option
start true Define whether to start or not the loading state when the plugin is initialized
onStart loading.overlay.fadeIn(150) Function to be executed when the loading state is started. Receives the loading object as parameter
onStop loading.overlay.fadeOut(150) Function to be executed when the loading state is stopped. Receives the loading object as parameter
onClick - Function to be executed when the overlay is clicked. Receives the loading object as parameter

Methods of Interest:

Method Return type Description Example
jQuery.fn.loading jQuery Initializes the plugin. $('#my-loading-element').loading({ ... })
jQuery.fn.Loading Loading Return the internal plugin object associated to the jQuery element. Also initialize the plugin if this the first call using this target. Note that this function is different from the common $.fn.loading wich start the plugin and return a chainable jQuery object. $('#my-loading-element').Loading()
resize jQuery 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. $(...).loading('resize')
start jQuery Turn on the loading state of some element and trigger the loading.start event. $(...).loading('start')
stop jQuery Turn off the loading state of some element and trigger the loading.stop event. $(...).loading('stop')
destroy jQuery Remove from DOM the overlay element. $(...).loading('destroy')
toggle jQuery Turn on or off the loading state of some element, depending of the current state, and trigger the respective event. $(...).loading('toggle')
$.Loading.setDefaults - Extend the Loading plugin default options $.Loading.setDefaults({ theme: 'blurred', ... })

  • This div is always loading

  • This div will start loading if you click it

  • This div will stop loading if you click it

Basic usage

<div id="loading-always" class="loading-div">
  <p>This div is always loading</p>
</div>
$("#loading-always").loading();

Starting

<div id="loading-start" class="loading-div">
  <p>This div will start loading if you click it</p>
</div>
$("#loading-start").click(function() {
  $(this).loading("start");
});

Stopping

<div id="loading-stop" class="loading-div">
  <p>This div will stop loading if you click it</p>
</div>
$("#loading-stop").loading({
  stoppable: true
});
$("#loading-stop").click(function() {
  $(this).loading("stop");
});

  • This div is toggling the loading state

  • This div has a different theme (dark)

Toggling

<div id="loading-toggle" class="loading-div">
  <p>This div is toggling the loading state</p>
</div>
setInterval(function() {
  $("#loading-toggle").loading("toggle");
}, 2000);

Custom animation

<div id="loading-custom-animation" class="loading-div loading-blink">
  <p>This div has a custom start / stop animation</p>
</div>
$('#loading-custom-animation').loading({
  onStart: function(loading) {
    loading.overlay.slideDown(400);
  },
  onStop: function(loading) {
    loading.overlay.slideUp(400);
  }
});
setInterval(function() {
  $('#loading-custom-animation').loading('toggle');
}, 2000);

Themes

<div id="loading-dark-theme" class="loading-div">
  <p>This div has a different theme (dark)</p>
</div>
$("#loading-dark-theme").loading({
  theme: "dark"
});

  • This div has a custom loading method

  • This div is button controled, using the events `loading.start` and `loading.stop` to change the state (text) of the button

Custom message

<div id="loading-custom-message" class="loading-div">
  <p>This div has a custom loading method</p>
</div>
$("#loading-custom-message").loading({
  message: "Working..."
});

Controls with events handling

<div id="loading-control" class="loading-div">
  This div is button controled, using the events `loading.start` and
  `loading.stop` to change the state (text) of the button
</div>

<button id="loading-control-btn" class="btn btn-primary btn-block">
  Click me to start loading
</button>
$("#loading-control-btn").click(function() {
  $("#loading-control").loading("toggle");
});

$("#loading-control")
.on("loading.start", function() {
   $("#loading-control-btn").html("Click me to stop loading");
})

.on("loading.stop", function() {
   $("#loading-control-btn").html("Click me to start loading");
});

Body loading

<button id="loading-body-btn" class="btn btn-primary btn-block">
   Click me to add a loading state to the page's body
</button>
$("#loading-body-btn").click(function() {
  $("body").loading({
    stoppable: true
  });
});

Body loading custom message

<button id="loading-body2-btn" class="btn btn-primary btn-block">
   Second body loading, different configs
</button>
$("#loading-body2-btn").click(function() {
  $("body").loading({
    stoppable: true,
    message: "Body loading, another message...",
    theme: "dark"
  });
});