Elegant Customizable Loading Indicator For jQuery - preloader

File Size: 90.3 KB
Views Total: 16886
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 

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.


4. Config the loading indicator with the following options.


  // 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

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