Custom animated loading screens
LoftLoader Pro lets you add an animated preloader to a WordPress website and control how it looks and behaves without writing code. It is intended for sites that want a designed loading screen while visitors wait for a page to finish loading.
The Pro edition expands the available controls for backgrounds, loaders, progress displays, messages, page targeting, devices, and transitions. Settings can be managed through an enhanced panel with WordPress Customizer support. The plugin uses CSS3 animations, JavaScript page-load detection, and minified CSS and JavaScript.
Control where and when it appears
You can handpick the pages or posts where the preloader is enabled, or hide it for selected post types such as products and portfolios. Different loaders can be assigned to Pages, Posts, and custom post types on one site. A preloader can also be shown once per visitor session.
Device controls let you show the loading screen on all devices, hide it on mobile, or show it on mobile only. You can enable a smooth page transition effect and disable page scrolling while loading. A minimum load time can prevent the preloader from disappearing too quickly.
Animation and visual options
- Choose from 19 loader animation types, including six that support custom images.
- Select additional ending animations for the transition after loading.
- Set an animation to loop forever, or configure some animations to run once and end after the page has loaded.
- Use a gradient background, full background image, or repeating background pattern.
- Choose background and loader colors, with opacity control for the background.
- Add custom images to supported loader animations.
- Set the preloader to detect all elements, images, videos, or images and videos during loading.
Progress and messaging
LoftLoader Pro can display a progress bar, a counting percentage, or both. Progress elements support control over color, position, size, and font. You can also add a welcome or loading message and adjust its color, position, and font.
The message area supports a Random Message feature, which can vary the text displayed during loading. A close button can be included so visitors can quit the loading screen. You can choose when the button appears within a range of 5 to 20 seconds and customize its text.
Practical setup and performance options
The responsive and retina-ready design supports use across different screen sizes. Styles can be saved as inline styles or as an external CSS file. The plugin is coded with SASS and includes an option to control how page elements are detected during loading.
Installation
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, select the animation and background treatment, and configure progress, messages, device behavior, and timing.
If a caching or performance optimization plugin moves LoftLoader JavaScript into the footer, exclude LoftLoader files from aggregation or minimization so the loading screen can execute as early as intended. Clear the cache after changing those settings.
