jQuery Plugin For Checking Content Has Been Loaded - is loading

is loading is a simple jQuery plugin that checks if all content (or any action) of your web page has been loaded and then triggers a visual feedback to your visitors. It also can disable form elements and put an overlay an specified area or whole page while the loading is active.

Installation:

# Yarn
yarn add is-loading

# NPM
$ npm install is-loading

Basic Usage:

1. Include jQuery library and is loading plugin on the page

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.isloading.js" type="text/javascript"></script> 

2. The Markup

<div class="demo">
<p class="alert">container</p>
<span class="btn">Test Button</span> 
</div>

3. The javascript

<script>
$(function() {

// Action on Click
$( ".btn" ).click(function() {

$( this ).isLoading();

// Load data or whatever
$( "p" ).removeClass("alert-success");

// Data Loaded, re-enable event
setTimeout( function(){

// Deactivate the loading plugin
$( ".btn" ).isLoading( "hide" );

$( "p" ).html( "Content Loaded" )
   .addClass("alert-success"); 
}, 1000 );
});

});
</script>

4. Options

const optionsDefault = {

  // switch | replace | full-overlay | overlay
  'type': 'switch',        

  // Text to display next to the loader
  'text': "Loading...",                 
  
  // true | false
  'disableSource': true,      
  'disableList': []
  
};

Change logs:

2017-03-13

• v2.0.2

2015-02-17

• v1.0.6

2014-10-05

• update

2014-10-01

• Allow hide for multiple elements seperately

---

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