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

File Size: 53.7 KB
Views Total: 5839
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 install class-loading --save

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

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


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">
$('#example').loading('loading loader');

5. The result HTML markup should be like these:

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

6. Remove CSS classes from the element.


7. Add CSS classes and get the callback.

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

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

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


v1.4.0 (01/20/2021)

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


  • 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.