Fully Configurable jQuery Loading Animation Plugin - JQueryLoader

JQueryLoader is a jQuery loader plugin which can be used to display loading indicators when the user clicks on a link. Comes with a variety of customization options and animation types.

Features:

• Animation types: fade, zoom, wave, shake, shrink, hammer, bubbleFade, bubbleZoom.
• Fully configurable: bar size, color, shadow, speed, delay, background transparency, background color etc.
• Very lightweight. Without any images.
• Supports multiple loaders on the same page.

How to use it:

1. Link to jQuery library and the JQueryLoader plugin's script.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="loader_plugin.js"></script>

2. Create a container element where you want to display the loaders.

<div class="loader" id="myLoader"></div>

3. Note that the loader container must have the CSS position attribute.

div.loader {
  position: absolute;
  height: 576px;
  top: 12%;
}

4. Call the function to generate a default loader inside the container.

$('#myLoader').Loading(); 

5. Customize the loading animation as follows:

$('#myLoader').Loading({
  height: 16, // height
  width: 4, // width
  barColor: '#039', // color
  barShadow: '0px 0px 0px #000', // shadow x, y, spread, color
  radius: 0, // radius
  spacing: 2, // space
  backgroundColor: '#000', // background color
  backgroundOpacity: .8, // opacity
  population: 22, // number of bars
  fadeLow: 0.05,
  fadeHigh: 1,
  newHeight: 20, // required height when using zoom, bubbleZoom, wave
  newWidth: 20,   // required width when using zoom
  loader_type: 'fade', // type of animation being used
  duration: 400, // duration for animation a single bar
  delay: 72
}); 

---

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