Files

• _preloader.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/preloader

Module Overview

Examples

Add the following code just after the opening body tag of the page(s) you wish the preloader to appear on:

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_clock">
        <div></div>
        <div></div>
    </div>
</div>

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), call the preloader() function on the preloader container:

$('.preloader').preloader();

The preloader() function has the following options:

$('.preloader').preloader({
    closeSelector : '.preloader_close', // the selector for the close button
    disableButton : true // show (true) or hide (false) the close button
});

More Examples

To use a different preloader, switch out the above HTML for any of the below examples, ensuring to update the value in the module's Sass configuration (to prevent bloated styles we need to tell Sass which preloader styles to output).

Pacman

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_pacman">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Balloons

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_balloons">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Hourglass

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_hourglass">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Carousel

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_carousel">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Bounce

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_bounce">
        <div>
            <div></div>
        </div>
    </div>
</div>

Ripple

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_ripple">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Disc

<div class="preloader">
    <div class="awd_disc">
        <div></div>
    </div>
</div>

Snake

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_snake">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Wave

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_wave">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Newton

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_newton">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Steps

<div class="preloader">
    <div class="preloader_close">
        <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
    </div>
    <div class="awd_steps">
        <div></div>
        <div></div>
    </div>
</div>

---

Customizing

The Preloader can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
output-JSON	true	This allows the config to be accessed in the JavaScript.
preloader	'clock'	This is the name of the preloader you wish to use (see above examples).
background	color('greyscale', 'grey-1')	The background color for the full screen overlay.
z-index	99	The z-index for the overlay.
transition	base('transition')	The transition time for the closing animation.
visible-at	breakpoint('break-2')	The minimum width at which the preloader should be visible.

To change one of the above values, pass your new value(s) to the logo() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include preloader((
    'preloader'  : 'pacman',
    'background' : #444444
));