This guide shows you how to display a loading animation, or your own logo, before a page appears, using Divi Plus. To see the feature and all of its options, visit the Page Preloader page: https://diviplus.io/page-preloader/

How to enable and configure

1. Open the WordPress Dashboard and navigate to the Divi Plus settings panel.
2. Select the Tools tab.
3. Find Page Preloader and toggle it ON.
4. Select your spinner animation type, set colors, upload your website logo, and set the fadeout speed.
5. Save changes to apply the preloader globally.

Tool setting

Page Preloader: Toggle the preloader ON or OFF globally.

Spinner: Choose your loading animation type.

Spinner Color: Pick a color for the loading spinner animation

Spinner Size: Adjust the diameter of the spinner in pixels (minimum size: 16px, default: 48px).

Page Background Color: Choose the background color of the preloader screen (default: #ffffff). Setting a brand background color provides a seamless transition.

Fade Duration: Set the duration in milliseconds for the preloader to fade out once the page has fully loaded (default: 400ms).

Logo URL: Upload a custom logo to display above the spinner animation (ideal for company branding).

Logo Size: Define the width of your logo image in pixels (minimum: 20px, default: 120px).

Unique features

• Smooth Window Load Listener: The preloader hooks into the browser’s window.addEventListener(‘load’) event. This ensures the preloader screen stays visible until the body, images, and heavy assets are completely parsed.
• Editor-Safe Exception: The extension automatically bypasses rendering when inside the Divi Visual Builder (using et_core_is_fb_enabled() checks). This ensures your editing experience remains unhindered by loader backdrops.
• Centering Flexbox Container: Renders loader items inside a full-screen layout centered on both vertical and horizontal axes.