Divi Preloader for Animated Full-Screen Page Loading
Divi Preloader adds a full-screen animated loader to your Divi site with 13 animation types, color and size, background, gradient overlay, logo, loading text, timing, frequency, and page exclusions.
Show a Preloader in Three Steps
Select a step to see exactly which controls light up inside the Divi Essential Preloader panel.
Build a Full-Screen Divi Preloader Without Code
13 Animation Types
Choose from Ring Spinner, Dual Ring, Bouncing Dots, Pulse Circle, and more
Animation Color
Match the loader color to your brand palette
Animation Size
Set the loader size in pixels for the right visual weight
Background Image
Upload a background image behind the loading animation
Gradient Overlay
Add a linear gradient overlay with custom angle and color stops
Logo Above Animation
Place a brand logo above the spinner during page load
Loading Text
Show a custom loading message with full typography control
Minimum Display Time
Set how long the preloader stays visible in milliseconds
Fade-out Duration
Control the smoothness of the loader exit transition
Show Frequency
Show on every page load or only once per session
Post Type Exclusions
Skip the loader on selected posts, pages, or projects
Live Preview
See every change instantly inside the settings panel
Welcome Visitors With a Branded Divi Preloader.
Divi Preloader gives you a full-screen loading screen with animation, color, gradient, logo, text, timing, and exclusion controls, all managed from one settings panel inside Divi Essential.
Pick the Right Animation
Choose from 13 animation styles and adjust color and size to match your brand.
Style the Loading Screen
Add background images, gradient overlays, logos, and loading text with typography controls.
Control When It Shows
Set display time, fade-out duration, frequency, and exclusions for specific post types.
Settings That Shape the Divi Preloader
Enable Preloader From Divi Essential
Thirteen Animation Types
Animation Color and Size
Background Image Upload
Overlay Background and Gradient
Logo Above the Animation
Loading Text and Typography
Minimum Display Time and Fade-out
Show Frequency Options
Exclude on Post Types and Pages
Live Preview Panel
Open Divi Essential, go to the Extensions tab, search for Preloader, and toggle it on to activate the full-screen loading screen.
Choose from Ring Spinner, Dual Ring, Bouncing Dots, Pulse Circle, Ripple, Ellipsis, Heartbeat, Orbit, Wave Dots, and more loader styles.
Use the color picker to match your brand and set Animation Size in pixels to balance the loader visually with the screen.
Select an image from the WordPress media library to display as the preloader background behind the animation, logo, and text.
Add a solid overlay background color or a linear gradient overlay with custom angle and color stops above the background image.
Upload a logo that sits above the loader animation, keeping your brand visible while the Divi page finishes rendering in the background.
Add custom loading text and control its color, size, font family, and font weight from 100 to 900 to match your site typography.
Set Minimum Display Time and Fade-out Duration in milliseconds to control how long the loader stays and how smoothly it exits.
Choose Every page load to show the loader each time, or Once per session to show it only on the first visit of a session.
Disable the preloader for selected post types like Post, Page, or Project, and for specific pages like Home or Accessibility Statement.
Watch every setting update inside the Live Preview panel so you can fine-tune the loader animation before saving and publishing.
Rated 4.8 Stars by 90+ Divi Users on Trustpilot
"Excellent product. I used it for Divi 4 and Divi 5. And the support is perfect. So quick response and help."
Sweden
"Our issue was solved fast. DiviNext takes his customers serieus. That is an important point for us."
Netherlands
"The team was very helpfull and professional! They resolved my problem in a very short time, and answered all my questions."
Italy
"Divi Next support does an outstanding job of addressing our issue; for this instance, it was our issue, not theirs. Thanks!"
United States
4.8 / 5 on Trustpilot · 90+ Verified Reviews
Everything Included with Divi Preloader
- Full-screen preloader toggle
- Ring Spinner animation
- Dual Ring animation
- Bouncing Dots animation
- Pulse Circle animation
- Equalizer Bars animation
- Ripple animation
- Ellipsis animation
- Square Flip animation
- Orbiting Dots animation
- Heartbeat animation
- Orbit animation
- Wave Dots animation
- Custom Image or Logo animation
- Animation color picker
- Animation size in pixels
- Background image upload
- Overlay background color
- Linear gradient overlay
- Logo above animation
- Loading text with typography
- Text color, size, family, and weight
- Minimum display time in milliseconds
- Fade-out duration in milliseconds
- Every page load or Once per session frequency
- Post type and page exclusions
- Live preview panel
- Built into Divi Essential
- Lifetime updates for Lifetime license holders
- Priority DiviNext support
Show a branded animated full-screen loader that holds visitor attention while your Divi page finishes rendering.
Get Divi Essential NowDivi Preloader — Key Questions Answered
How to Use Divi Preloader
Open Divi Essential from the WordPress dashboard, click Extensions, and activate the Preloader toggle.
Open Preloader Settings, then choose an animation type, color, and size from the Animation tab.
Switch to Appearance to add a background, gradient, logo, and text, then set timing, frequency, and exclusions under Behavior.
More Built Into Divi Essential
Scrolling Stacked Card
Layered card sections with pinning, spacing, scale, and rotation
Horizontal Scrolling Card
Sideways scroll layouts with pinning, parallax, and indicators
Tooltip
Tooltip text with position, color, arrow, and animation controls
Cursor and Trail Effects
50 cursor, pointer trail, and image trail effects
Particle Effects
40 GSAP-powered particle animations for any section
Spotlight Effects
Cursor-driven spotlight lighting for 100+ modules
Show a Loader While Your Divi Page Loads.
Use Divi Preloader to display an animated full-screen loading screen with 13 animations, color, size, background, gradient, logo, text, timing, frequency, and exclusion controls.
