Login Register

Kayzen

Preloader

assets/modules/objects/preloader

Files

  • _preloader.scss
  • README.md

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

Module Overview

  • Name: preloader
  • Modifiers: loaded
  • Components: close

Examples

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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_clock">
  6. <div></div>
  7. <div></div>
  8. </div>
  9. </div>
<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:

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

The preloader() function has the following options:

  1. $('.preloader').preloader({
  2. closeSelector : '.preloader_close', // the selector for the close button
  3. disableButton : true // show (true) or hide (false) the close button
  4. });
$('.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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_pacman">
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. <div></div>
  11. <div></div>
  12. </div>
  13. </div>
<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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_balloons">
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. </div>
  11. </div>
<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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_hourglass">
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. </div>
  10. </div>
<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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_carousel">
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. <div></div>
  11. </div>
  12. </div>
<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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_bounce">
  6. <div>
  7. <div></div>
  8. </div>
  9. </div>
  10. </div>
<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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_ripple">
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. </div>
  10. </div>
<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

  1. <div class="preloader">
  2. <div class="awd_disc">
  3. <div></div>
  4. </div>
  5. </div>
<div class="preloader">
    <div class="awd_disc">
        <div></div>
    </div>
</div>

Snake

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_snake">
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. <div></div>
  11. </div>
  12. </div>
<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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_wave">
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. <div></div>
  11. </div>
  12. </div>
<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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_newton">
  6. <div></div>
  7. <div></div>
  8. <div></div>
  9. <div></div>
  10. </div>
  11. </div>
<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

  1. <div class="preloader">
  2. <div class="preloader_close">
  3. <div class="button-round-border-size-2-thin-grey-3">Disable Preloader</div>
  4. </div>
  5. <div class="awd_steps">
  6. <div></div>
  7. <div></div>
  8. </div>
  9. </div>
<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).

  1. @include preloader((
  2. 'preloader' : 'pacman',
  3. 'background' : #444444
  4. ));
@include preloader((
    'preloader'  : 'pacman',
    'background' : #444444
));