Preloader

Adds a preloader screen before your site shows in. It can be used to make the user waits while site ressources are loaded or to create a nice intro animation.

Usage

<div data-lg-preloader></div>
<div data-lg-preloader="fade"></div>
<div data-lg-preloader="my-preloader"></div>

You can use one of the built-in animations or create your own one.

Built-in animations

luge comes with a few preloader animations:

• fade
• slide|slide-to-top|slide-to-right|slide-to-bottom|slide-to-left

(more coming…)

Custom animations

The preloader DOM Element gets a .lg-preloader and a.lg-preloader--[preloader name] CSS classes when initiated. It also gets a .is-hidden CSS class when the site is ready to be shown.

You can use these to animate the preloader in CSS:

.lg-preloader--my-preloader {
  opacity: 1;
  transition: opacity 0.6s linear;

  &.is-hidden {
    opacity: 0;
  }
}

Or you can use a third-party JS animation library:

luge.preloader.add((done, remove) => {
  gsap.to(
    document.querySelector('.lg-preloader'), 
    {
      opacity: 0,
      onComplete: () => {
        done()
        remove()
      }
    }
  )
})

The preloader callback function gets passed two parameters:

• done(): proceed to the next life cycle event. Call it when you want to launch pageIn or reveal hooked animations.
• remove(): remove the preloader element from DOM. Call it when your preloader animation is complete.

Lottie animation

You can use a lottie animation as a preloader animation, it will be played when the preloader hides.

<div
  data-lg-preloader="lottie"
  data-lg-preloader-in="/path/to/lottie.json">
</div>

Please note that lottie is not bundled with luge, you have to make sure to load lottie in your code and make the lottie property globally accessible before luge initialization.

Attributes

Attribute	Type	Default	Description
data-lg-preloader	String	null	The preloader animation name. Set it to one of the built-in animations name or create your own one.
data-lg-preloader-duration	Number	0	Defines the minimum duration (in second) before hidding the preloader. For instance it can be used if you want to make sure that the user has time to read something on the preloader screen. The default value can be changed globally in JS luge.settings({preloader: {duration: 0}}).
data-lg-preloader-in	String	null	Path to lottie json file when using a lottie animation as a preloader animation.
data-lg-preloader-reverse	Boolean	false	Makes the lottie animation play in reverse direction.