Minimal Loader/Preloader Plugin - jQuery preloadinator

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.

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.

  • Publication date: 15.03.2018
  • Source