Modern Circle Loading Indicator Plugin For jQuery - jquery-loading.js

A simple, lightweight jQuery plugin that displays a stylish, configurable and CS33 animated spinner / indicator while loading some data for user feedback. The loading indicator can be applied on the whole webpage or over single DOM elements.

How to use it:

1. Make sure you've loaded the latest version of jQuery library and then load the jquery-loading.js plugin's files when needed.

<link href="css/jquery-loading.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="js/jquery-loading.js"></script>

2. Call the function loading on the target container and done.

$('.container).loading();

3. Add a custom background overlay to the loading indicator.

$('.container).loading({
  overlay: true
});

.js-loading-overlay {
  background-color: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

4. Specify the indicator's width/height relative to its parent element.

$('.container).loading({
  base: 0.9
});

5. Specify the number of circles used in the loading indicator.

$('.container).loading({
  circles: 3 // maximum is 3
});

6. Set fixed width to loading indicator, otherwise calculated relative to element.

$('.container).loading({
   width: null
});

7. More configuration options with default values.

$('.container).loading({

  // add an overlay background
  overlay: false, 

  // set fixed width to loading indicator, otherwise calculated relative to element
  width: null, 

  // html template
  indicatorHtml: "<div class='js-loading-indicator' style='display: none;'></div>",
  overlayHtml: "<div class='js-loading-overlay' style='display: none;'></div>",

  // indicator's width/height relative to element
  base: 0.9, 

  // number of indicator circles: maximum is 3
  circles: 3, 

  // position options
  top: null,
  left: null,

  // hide the indicator of the current element
  hide: false, 

  //remove the indicator from the DOM
  destroy: false 
  
});

Change log:

2016-12-15

• Update hide and destroy options

---

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