back

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>

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.