Elegant Customizable Loading Indicator For jQuery - preloader

preloader.js is a simple, lightweight jQuery loading indicator plugin to create content loaders and preloaders while data in a specific area is loading. With support for custom loading text, percentage value, and duration.

How to use it:

1. The plugin requires the latest version of jQuery library loaded properly in the document.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>

2. Load the jQuery preloader.js plugin's JavaScript and Stylesheet in the document.

<link rel="stylesheet" href="preloader.css">
<script src="jquery.preloader.min.js"></script>

3. The JavaScript to show a loading indicator on a specific element.

$('.someBlock').preloader();

4. Config the loading indicator with the following options.

$('.someBlock').preloader({

  // loading text
  text: '', 

  // from 0 to 100 
  percent: '', 

  // duration in ms
  duration: '', 

  // z-index property
  zIndex: '', 

  // sets relative position to preloader's parent
  setRelative: false 
  
});

5. API methods.

// remove the loading indicator
$('.someBlock').preloader('remove')

// update the loading indicator
$('.someBlock').preloader('update', {
  percent: '70',
  text: 'example',
  // more options here
});

---

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