Minimal Loader/Preloader Plugin - jQuery preloadinator

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

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="" 
<script src="dist/js/jquery.preloadinator.min.js"></script>

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


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

  scroll: false

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

  minTime: 2000

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

  animation: 'fadeOut',
  animationDuration: 400

8. Callback functions available.

  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.