Intro
Make every first impression count.
Preloader gives your website a polished, professional feel from the very first moment. Instead of showing half-loaded content, your pages reveal themselves only when they're truly ready — smooth, clean, and intentional.
Choose from multiple built-in spinner styles that, combined with size, color, speed, and animation options, become virtually unlimited visual combinations. Add optional overlay text with pulse animation, control fade timing, and fine-tune every detail to match your brand perfectly. Your site deserves a great entrance.
AI ready
Fully compatible with the Elements AI Assistant. Every option now carries a clear, plain-language description. Describe the entrance you have in mind and the AI builds it: it picks the spinner that fits, matches the colors to your theme and chooses how the preloader should leave the page. It also knows the difference between the two modes: Page Load waits for heavy pages to be ready, while Fixed Time gives every visit the same branded intro.
Example: "Add a preloader on a red background with a white circle spinner and the text 'Welcome' below it, and make it fade out slowly after three seconds."
Welcome!
Preloader Options
Preview
✓ See exactly how your preloader looks directly in the Elements editor, without publishing. Toggle it on to preview any combination of spinner, text and overlay in real time.
Spinners
✓ Choose from multiple built-in animation styles to match your brand's personality. Each spinner comes with its own set of dedicated controls, visible only when that style is active.
Text
✓ Add an optional loading message below the spinner to give your visitors a clear, branded signal that the page is on its way. Full typography control with system-safe fonts that are always available before the page loads.
Overlay
✓ Set the background color that covers the page while content loads. Fully integrated with your theme color palette. Add an optional vignette effect to soften the edges of the overlay — subtle, natural, and fully controllable in opacity.
Setting
✓ Control exactly how and when the preloader disappears. Choose between two trigger modes and fine-tune the fade-out animation to create the smoothest possible transition into your content.
ⓘ This component affects the Elements code and does not add anything visible to the layout. Simply drag it in and edit the options. Then export and preview in the browser to see the effect.
Advanced
✓ Fine-tune visibility and extend the component with custom classes for edge cases and advanced layouts.