Modern Preloader

Add to your website trendy effect on start loading.

• Plays a logo intro, then a selected reveal effect.

• Starts only when the tab is active and the component is in the viewport.

• Removes itself after fade out to restore page interactivity (from DOM).

How to use?

• Drop the component above all layers in Section.

• Set position: absolute, align to center and upper z-index.

• Width: 100%, height: 100%.

• In Styles need to add Pointer Events - None.

• Pick an effect and tune durations.

• Upload a logo if needed.

Effects

• Blinds (vertical/horizontal)

• Diagonal Blinds

• Fade

• Slide Up / Down / Left / Right

• Zoom

• Circle Reveal

• Corner Reveal

• Center Open (split from center; Flip switches to vertical split)

Important! In styles of Component need set Pointer Events - None.