AJAX Asynchronous Loader Plugin For jQuery - Loading.js

Loading.js is a lightweight and cross-browser jQuery plugin used for displaying a custom loading overlay / indicator while you fetch and load some content into a specific container via AJAX.

How to use it:

1. Place the jQuery loading.js script after jQuery but before you close the body tag:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.loading.js"></script>

2. Create a button to fetch and load some content into the container '.example'.

<div class="example">
  ...
</div>
<button class="button">Load Content</button>

3. The JavaScript to display a loading indicator while loading.

$('.button').on('click', function(e) {
    e.preventDefault();
    $('.example').loading();
    setTimeout(function() {
      $('.example').loading('done');
      $('.example1').html('Content To Display');
    }, 1000);
    return false;
});

4. All default config options.

// message to display while loading
text: 'Loading...',

// CSS class
className: 'loading',

// theme class
themeClass: null,
emptyParent: false,

// enable fadein animation
animate: false,

// custom markup
markup: '<div class="{class}"></div>'

---

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