Minimalist Loading Indicator Plugin For jQuery - Preloader.js

Preloader.js is a super tiny jQuery plugin used to generate a customizable, CSS3 based loading indicator for content loader or preloader.

How to use it:

1. Add the latest version of jQuery library and jQuery Preloader.js to the html page.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="dist/jquery.preloader.min.js"></script>

2. Create the Preloader element.

<div id="preloader">
  <div id="preloader-inner"></div>
</div>

3. Display the Preloader element on the screen that will auto dismiss after 1.5 seconds.

$(window).preloader({
  delay: 1500
});

4. The sample CSS to create a cool loading spinner for the preloader.

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000
}

#preloader #preloader-inner {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #3498db;
  animation: spin 2s linear infinite
}

#preloader #preloader-inner:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e74c3c;
  animation: spin 3s linear infinite
}

#preloader #preloader-inner:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f9c922;
  animation: spin 1.5s linear infinite
}
@keyframes 
spin { 0% {
transform:rotate(0deg)
}

to { transform: rotate(1turn) }
}

5. The customization options with default values.

$(window).preloader({

  // preloader selector
  selector: '#preloader',

  // Preloader container holder
  type: 'document',

  // 'fade' or 'remove'
  removeType: 'fade',

  // fade duration
  fadeDuration: 750,

  // auto disimss after x milliseconds
  delay: 0
  
});

---

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