Preload Effects
Create a Memorable First Impression with Page Loading Effects – Keep your visitors engaged while your page loads by adding dynamic and visually appealing loading animations.
1. How to install Page loading effect extension?
Note: When you finish installing the Page loading effect extension, it will automatically show.
To open the Extension popup, you have two ways:
- Click on the Extension icon at the top left corner.
- Under the Extension tab, click Add more.

Below is the way to install the Page loading effect extension:

2. How to set the Page loading effect extension?
General Settings
- Enable: You can enable/disable it without removing the extension.

- Overlay Effects – Bring your design to life with animations like fade, slide, and zoom-out overlays, creating an engaging user experience.

- Overlay effect duration – The duration of your overlay effects plays a crucial role in creating smooth, engaging animations that enhance the user experience.

- Overlay background: Use overlay backgrounds to enhance content visibility, add depth, and elevate your design aesthetics.

- Loader type: CSS & Image
For CSS type, choose a Loader style and set the main color for the Loader

For Image type, choose an Image, set Loader image size and choose Image animation

After setting everything up, you can view the result on the live page
