Minimal Loader/Preloader Plugin - jQuery preloadinator
File Size: | 7.9 KB |
---|---|
Views Total: | 17323 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.