Preloader

The Preloader displays a full-screen loading overlay while your page loads, then smoothly fades out once everything is ready. It supports 13 animation styles, custom logos, colors, and CSS.

How to Enable Preloader

To use the preloader feature, you'll need to activate the extension:

Go to your WordPress Dashboard.
Navigate to DiviMotion → Extensions.
Toggle on Preloader.

Once enabled, the preloader appears automatically on all frontend pages (excluding builder and admin views).

Settings Overview

Clicking Configure opens the Preloader settings modal. All customisation happens here across three tabs: General, Appearance, and Advanced. A live preview at the top of the modal updates in real time as you make changes.

General Tab

The General tab controls whether an animation element is shown and which animation style is used.

Setting	What It Does
Show Animation	Toggle the animation element on or off. When off, only the background colour and logo are shown — no animated element appears.
Animation Type	Choose from 13 built-in animation styles. Only visible when Show Animation is enabled.

Appearance Tab

The Appearance tab controls the visual design of the preloader overlay, including colours, logo, and logo sizing.

Setting	What It Does
Background Color	Sets the full-screen overlay colour that fills the screen during loading.
Animation Color	Sets the color of the animated element. Only visible when Show Animation is enabled.
Logo	Upload a logo via WordPress media library. The logo displays above the animation and fades gently between 30% and 100% opacity while the page loads.
Logo Width	Controls the display width of the uploaded logo, from 20px to 400px. Height scales proportionally. Only visible when a logo has been uploaded.