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 options panel with WordPress Customizer support. The Pro edition supports WordPress 4.7 or later; the latest WordPress version is recommended for compatibility with themes and other add-ons.

Set display and loading rules

Choose specific pages or posts for the preloader, conceal it on 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, images, videos, or both images and videos.

Device controls let you show the screen on all devices, hide it on mobile, or show it only on mobile. You can enable smooth page transitions, disable page scrolling while loading, and set a minimum load time so the screen does not disappear too quickly.

Choose animations and backgrounds

• Select from 19 loader animation types, including six that support custom images.
• Choose an ending animation. Animations can loop continuously, and some can execute once and end after the page loads.
• Use a gradient, full background image, or repeating background pattern. Set background and loader colors, with opacity control for the background.

Display progress and messages

Show a progress bar, a counting percentage, or both. Adjust their color, position, size, and font. Add a welcome or loading message and set its color, position, and font; the Random Message feature can vary the text during loading.

A close button lets visitors quit the loading screen. Choose when it appears, from 5 to 20 seconds, and personalize its text.

Install and configure

Install and activate LoftLoader Pro in WordPress, then open its settings through the WordPress Customizer. Choose where the preloader appears, choose its animation and background, and set progress, messages, device behavior, and timing. The responsive, retina-ready styling supports different screen sizes. Styles can be saved inline or as an external CSS file; the plugin is coded with SASS and includes minified CSS and JavaScript.

If a caching or performance extension moves LoftLoader JavaScript into the page footer, exclude LoftLoader documents from aggregation or minification so the loading screen can run as early as intended. Clear the cache after changing those settings.