Add/Remove CSS Class While Loading Something - class-loading

class-loading is a super tiny jQuery plugin that simply adds custom CSS classes and a disabled attribute to elements while some content is being loaded.

Ideal for displaying a custom loading indicator on the container when the user is loading something asynchronously.

Written in TypeScript and with Callback & Promise support.

How to use it:

1. Install & Download.

# NPM
$ npm install class-loading --save

2. Import the class-loading as an ES module.

import initLoading from 'class-loading';
import $ from 'jquery';

initLoading($);

3. Or directly load the class-loading plugin's script after jQuery.

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

4. Add CSS classes to the element. In this example, we're going to create a CSS loaded inside the #example container while loading something. Here are a collection of 80+ loading indicators written in pure HTML/CSS.

<div id="example">
  ...
</div>

$('#example').loading('loading loader');

5. The result HTML markup should be like these:

<div id="example" disabled="disabled" class="loading loader">
  ...
</div>

6. Remove CSS classes from the element.

$('#example').loading(false);

7. Add CSS classes and get the callback.

const done = $('selector').loading('loading', true); 
      ...
done();

8. Add CSS classes and remove on promise resolve or reject.

const done = $('selector').loading('loading', promise); 
setTimeout(done, 5e3);

Changelog:

v1.4.0 (01/20/2021)

• Avoid re-focusing the disabled element if out of viewport on enable

2020-10-24

• Re-focus the element on enable

---

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