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 in CodePen:

Props

Static Props

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

Name	Description	Type	Default Value
container	The container for the preloader. Set it to null if you only need the preloader logic.	HTMLElement | null
hide	Defines whether to automatically hide the preloader container. false: Disables the hiding animation, allowing you to manage it manually. number: Specifies the animation duration in milliseconds. This works only if the container is an HTML element.	false | number	250

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();