Minimal Loader/Preloader Plugin - jQuery preloadinator

The preloadinator jQuery plugin helps you create a CSS based animated loading indicator that is fully controllable and configurable via JavaScript. Ideal for both loader and preloader.

How to use it:

1. The basic HTML structure for the loading indicator that is consists of 3 animated dots.

<div class="preloader js-preloader flex-center">
  <div class="dots">
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>
</div>

2. The required CSS/CSS3 for the loading indicator. Feel free to use your own CSS3 based loading indicator.

.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #60D7A9;
}

.dots .dot {
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0 10px 0 10px;
  border-radius: 50%;
  background: #FFF;
  -webkit-animation: dot-dot-dot 1.4s linear infinite;
  animation: dot-dot-dot 1.4s linear infinite;
}

.dots .dot:nth-child(2) {
  animation-delay: .2s;
}

.dots .dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes dot-dot-dot {
  0%, 60%, 100% {
    -webkit-transform: initial;
      -ms-transform: initial;
        transform: initial;
  }
  30% {
    -webkit-transform: translateY(-25px);
      -ms-transform: translateY(-25px);
        transform: translateY(-25px);
  }
}

3. Insert jQuery JavaScript library and the jQuery preloadinator plugin into the html file.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous"></script>
<script src="dist/js/jquery.preloadinator.min.js"></script>

4. Initialize the plugin to display the loading indicator on page load.

$('.js-preloader').preloadinator();

5. Enable/disable the page scrolling when the loading indicator is active.

$('.js-preloader').preloadinator({
  scroll: false
});

6. Set the minTime in milliseconds the loading indicator should display.

$('.js-preloader').preloadinator({
  minTime: 2000
});

7. Config the animation when the loading indicator is closed.

$('.js-preloader').preloadinator({
  animation: 'fadeOut',
  animationDuration: 400
});

8. Callback functions available.

$('.js-preloader').preloadinator({
  afterDisableScroll: function() {},
  afterEnableScroll: function() {},
  afterRemovePreloader: function() {}
});

---

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