Preloader

Import Preloader from @waaark/luge, register it with luge.addPlugin('preloader', Preloader), then call luge.init(). See Getting started for a complete setup.

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

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

The plain slide animation is an alias of slide-to-top.

Try it

Open the full demo