LoftLoader Pro displays an animated preloader while a WordPress page loads. JavaScript detects page loading, and CSS3 animations display the screen. Configure its appearance and behavior in an enhanced settings panel with WordPress Customizer support. The Pro edition works with WordPress 4.7 or later.

Display rules and loading behavior

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

Device controls let you show the screen on all devices, hide it on mobile, or show it only on mobile. Set a minimum load time, enable smooth page transitions, and disable page scrolling while loading.

Animation and feedback

• Choose from 19 loader animation types, including six that support custom images. Select an ending animation, and set supported animations to loop or execute 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.
• Display a progress bar, counting percentage, or both. Adjust their color, position, size, and font.
• Add a welcome or loading message, tailor its color, position, and font, or use Random Message to vary the text.
• Add a close button, set when it appears from 5 to 20 seconds, and customize its text.

Setup and styling

Install and activate LoftLoader Pro in WordPress, then open its settings through the WordPress Customizer. Choose the pages, posts, or post types where the preloader should appear, then configure its animation, background, progress, messages, device behavior, and timing. The responsive, retina-ready design supports different screen sizes. Save styles inline or as an external CSS file; the extension uses SASS and minified CSS and JavaScript.

If a caching or performance optimization add-on 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 those settings.