preloadinator
A super-lightweight preloader plugin powered by jQuery
Dependencies
Preloadinator requires the dependencies listed below.
Quickstart
- Write HTML markup for your preloader
<div class="preloader js-preloader"> </div>- Write CSS styling for the preloader & include this into your HTML file
.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #60D7A9; }- Add jQuery & preloadinator.min.js right before your closing
<body>tag
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="dist/jquery.preloadinator.min.js"- Initialise your preloader & include this into your HTML file
$('.js-preloader').preloadinator();- Kick back & relax
🍺
Options
| Option | Type | Default | Description |
|---|---|---|---|
| scroll | boolean | false | Enable/disable scrolling when the preloader is displayed |
| minTime | integer | 0 | Minimum amount of time to display preloader (in milliseconds) |
| animation | function | fadeOut | Animation used to remove the preloader when the page has loaded |
| animationDuration | integer | 400 | Duration of animation (in milliseconds) |
Use the options above like so:
$('.js-preloader').preloadinator({ scroll: false, minTime: 2000, animation: slideUp, animationDuration: 600 });Callbacks
| Callback | Description |
|---|---|
| afterDisableScroll | This callback is fired after scrolling is disabled (if scroll option is set to false) |
| afterEnableScroll | This callback is fired after scrolling is enabled (if scroll option is set to false) |
| afterRemovePreloader | This callback is fired after the preloader is removed from the view |
Use the callbacks above like so:
$('.js-preloader').preloadinator({ afterDisableScroll: function() { alert('Scrolling has just been disabled.'); }, afterEnableScroll: function() { alert('Scrolling has just been enabled.'); }, afterRemovePreloader: function() { alert('The preloader has just been removed.'); } });Happy coding!
— Leon
