README

preloadinator

A super-lightweight preloader plugin, powered by jQuery & CSS :zap:

Dependencies

Preloadinator requires the dependencies listed below.

jQuery

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 :beer:

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! 🤖

— akbarbuneri