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.
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.
Enable/disable editor preview toggle
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.
Style selector (Circle, Dots, Pulse, Wave, Ray, Off)
Size, thickness, rounded corners
Single or dual color, optional fill
Animation speed control
Spinner Off mode: overlay and text remain visible
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.
Enable/disable toggle
Custom text content
System-safe font selection (Sans, Serif, Mono)
Text style, letter spacing, italic
Theme color picker
Optional pulse animation with speed control
Adjustable gap between spinner and text
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.
Fade ease curve (Ease, Ease In, Ease In Out, Ease Out)
Fade-out duration (0.2s to 3s)
Page Load mode: hides after content is fully ready, with optional delay
Fixed Time mode: hides after a set timeout regardless of load state
ⓘ 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.
Minimum viewport width to activate the preloader
Custom CSS classes field