Skip to main content

Preloader

Page preloader component that manages the visibility and lifecycle of a loading screen. The module does not provide styling for the container.

Example​

Explore a live example on CodePen:

Props​

Static Props​

Static properties are set during initialization and cannot be modified later.

container​

  • Type: HTMLElement | null
  • Default: null
  • The container for the preloader. Set it to null if you only need the preloader logic.

hide​

  • Type: false | number
  • Default: 250
  • Defines whether to automatically hide the preloader container.
    • false: Disables the hiding animation, allowing manual control.
    • number: Specifies the animation duration in milliseconds.
  • Works only if the container is an HTML element.

Mutable Props​

Mutable properties can be updated at runtime using .updateProps().

Accessors​

note

All Module's accessors are available in this class.

isHidden​

Type: boolean

Returns whether the preloader is currently hidden.

Methods​

note

All Module's methods are available in this class.

hide​

Hides the preloader with a custom animation duration.

const cancelCallback = instance.hide(500, () => console.log('hide'));

// If need to cancel the callback
cancelCallback?.();

onHidden​

Registers a callback for when the preloader is fully hidden.

const cancel = instance.onHidden(() => console.log('hidden'));

// If need to cancel the callback
cancel?.();

onHide​

Registers a callback for when the preloader starts hiding.

const cancel = instance.onHide(() => console.log('hide'));

// If need to cancel the callback
cancel?.();

Callbacks​

note

All Module's callbacks are available in this class.

loaded​

Triggered when the page is fully loaded.

const destruct = instance.on('loaded', () => console.log('loaded'));

// Cancel the callback
destruct();

hide​

Triggered when the preloader starts hiding.

const destruct = instance.on('hide', () => console.log('hide'));

// Cancel the callback
destruct();

hidden​

Triggered when the preloader is completely hidden.

const destruct = instance.on('hidden', () => console.log('hidden'));

// Cancel the callback
destruct();