LoftLoader Pro displays an animated preloader while a WordPress page loads. JavaScript detects loading, while CSS3 animations create the screen. Configure its appearance and behavior in the options panel with WordPress Customizer support.

Choose where it appears and what it tracks

Handpick pages or posts for the preloader, hide it on selected post types such as products or portfolios, or assign various loaders to Pages, Posts, and custom post types. You can also display it once per user session. Choose whether loading detection tracks all elements, pictures, videos, or images and videos.

Set the animation and visual style

• Choose from 19 loader animation types; six support custom images.
• Select an ending animation and set supported animations to loop continuously or run once and end after the page loads.
• Style the background with a gradient, full image, or repeating pattern. Set background and loader colors, including background opacity.
• Save styles inline or in an external CSS file.

Configure feedback, timing, and device behavior

Show a progress bar, a counting percentage, or both, with controls for color, position, size, and font. Add a welcome or loading message and adjust its appearance; Random Message can vary the displayed text. A close button lets visitors quit the loading screen. Set when it appears from 5 to 20 seconds and tailor its text.

Choose to show the screen on all devices, hide it on mobile, or show it only on mobile. You can enable smooth page transitions, disable scrolling while loading, and set a minimum load time to keep the preloader from disappearing too quickly. The design is responsive and retina-ready.

Install and configure

Install and activate LoftLoader Pro in WordPress, then open its settings through the WordPress Customizer. Choose the pages, posts, or post types to target, then set the animation, background, progress, messages, device behavior, and timing. LoftLoader Pro works with WordPress 4.7 or higher and requires JavaScript to function.

If a caching or performance optimization extension moves LoftLoader JavaScript into the footer, exclude LoftLoader files from aggregation or minimization so the loading screen can run as early as intended. Clear the cache after changing that setting.