Elegant Customizable Loading Indicator For jQuery - preloader

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 specific area is loading. With support for custom loading text, percentage value, and duration.

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.

  • Publication date: 29.10.2017
  • Source