The quickest way to add a WordPress preloader is to install a dedicated plugin, enable its loader, choose an image or template, set where it appears, and clear your cache. If you need exact branding or minimal code, add an overlay in your markup and load its CSS and JavaScript with WordPress’s enqueue hooks. Whichever method you choose, keep the overlay brief, provide a no-JavaScript escape path, respect reduced-motion settings, and never block keyboard access to the page.
Choose the implementation that fits your site
| Method | Coding | Placement | Controls | Main risk |
|---|---|---|---|---|
| Preloader plugin | None | Automatic plugin output | GIF or template, display rules | Cache or optimization conflicts |
| LoftLoader | None | Customizer and plugin hooks | CSS3 effects, loading and exit effects, page targeting | Its listing warns that JavaScript failure can leave pages hanging unless a fallback is provided |
| Waito | None for the overlay; shortcode placement | Shortcode where you place it | CSS overlay with a small, dependency-free JavaScript file | Requires careful shortcode placement and testing with your theme |
| Custom code | HTML, CSS and JavaScript | Your markup plus wp_enqueue_scripts |
Complete visual, targeting and behavior control | You must implement accessibility, failure handling and maintenance |
Method 1: Install the Preloader plugin
This is the most practical route for a non-coder. The WordPress.org listing viewed on September 30, 2026 identifies Preloader as version 2.0.2 with more than 20,000 active installations.
- In the WordPress dashboard, open Plugins > Add New Plugin.
- Search for Preloader, install the listing you have verified, and select Activate.
- Open the new Preloader menu.
- Enable the preloader.
- Upload a GIF or choose one of the supplied templates.
- Set the display rules, such as the pages or visitors that should see it.
- Save the settings, then clear your site, page-cache and CDN caches when applicable.
Test an incognito window and a logged-out session after every cache or minification change. A cached copy can make a correctly configured loader appear not to work, or can preserve an older script that never dismisses.
Method 2: Configure LoftLoader in the Customizer
LoftLoader exposes its settings through the WordPress Customizer. Its listing describes pure CSS3 effects, JavaScript detection of the full-page load, several loading and exit effects, and page-specific configuration.
#1 Best Overall
- Install and activate LoftLoader from Plugins > Add New Plugin.
- Open Appearance > Customize and select the LoftLoader panel.
- Choose the loader animation, colors, logo or other branding controls available in your installed version.
- Configure the loading and exit effects.
- Use the page-specific controls to exclude pages where a loader adds no value, such as a fast contact form or an internal utility page.
- Publish the Customizer changes and test with JavaScript enabled and disabled.
LoftLoader’s own listing warns that a page can hang when JavaScript is unavailable. Do not ship the overlay until a script-error or no-JavaScript path leaves the page content visible.
Method 3: Place Waito with a shortcode
Waito uses a CSS overlay and a few kilobytes of dependency-free JavaScript. Its shortcode approach lets you place the loader without editing a theme template file.
- Install and activate Waito.
- Open its settings and create the overlay using the available options.
- Copy the generated shortcode.
- Place the shortcode in the location documented by the plugin, such as a site-wide content or widget area supported by your theme.
- Save, purge caches, and check the front end on a desktop keyboard, a touch device and a slow connection.
Because shortcode output depends on where your theme renders that content, verify that the overlay appears early enough and covers the intended viewport without covering browser or assistive-technology controls.
Method 4: Build a lightweight custom preloader
Use this route when you need a specific brand treatment, precise page targeting or no plugin dependency. WordPress documentation recommends enqueuing front-end assets through hooks rather than pasting untracked files into a template. The front-end hook is wp_enqueue_scripts; scripts can be registered with wp_enqueue_script(), and small inline additions can use wp_add_inline_script().
1. Add an overlay with a safe default
Place this near the start of the page body in a child-theme template or a controlled markup hook. The noscript rule guarantees that a visitor without JavaScript can see the page.
<div class="wp-preloader" role="status" aria-live="polite" aria-label="Loading">
<span class="wp-preloader__spinner" aria-hidden="true"></span>
<span class="screen-reader-text">Loading page</span>
</div>
<noscript><style>.wp-preloader{display:none!important}</style></noscript>Keep the spinner decorative with aria-hidden="true". The status text should not repeatedly announce animation frames.
Rank #4
2. Enqueue the CSS and JavaScript
Add this to a child theme’s functions.php or, preferably, a small site plugin. Replace the file paths with your actual asset locations.
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'site-preloader',
get_stylesheet_directory_uri() . '/assets/preloader.css',
array(),
'1.0.0'
);
wp_enqueue_script(
'site-preloader',
get_stylesheet_directory_uri() . '/assets/preloader.js',
array(),
'1.0.0',
true
);
} );3. Animate with inexpensive properties
Use transforms and opacity rather than repeatedly changing layout-affecting properties. The transition below is intentionally short; WordPress animation guidance says animations should be fast and almost always complete in less than 0.2 seconds.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →.wp-preloader {
position: fixed;
inset: 0;
z-index: 99999;
display: grid;
place-items: center;
background: #fff;
opacity: 1;
visibility: visible;
transition: opacity .18s ease, visibility .18s ease;
}
.wp-preloader.is-done {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.wp-preloader__spinner {
width: 2rem;
height: 2rem;
border: .2rem solid #d9d9d9;
border-top-color: #111;
border-radius: 50%;
animation: preloader-spin .7s linear infinite;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.wp-preloader { transition: none; }
.wp-preloader__spinner { animation: none; }
}4. Dismiss it on page load and on script failure
The script removes the visual obstruction after the load event. The timeout is a last-resort escape hatch for a stalled resource; tune it to your site rather than leaving an opaque layer indefinitely.
(function () {
var loader = document.querySelector('.wp-preloader');
if (!loader) return;
function dismiss() {
loader.classList.add('is-done');
loader.setAttribute('aria-hidden', 'true');
}
if (document.readyState === 'complete') {
dismiss();
} else {
window.addEventListener('load', dismiss, { once: true });
}
window.setTimeout(dismiss, 8000);
}());Do not trap focus behind the overlay. A keyboard user must be able to reach page controls as soon as content is available, and a script error must not create a permanent opaque screen.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance and accessibility checks
- Keep it brief: the loader should cover only the wait for essential page resources, not manufacture a delay.
- Respect reduced motion: use
@media (prefers-reduced-motion: reduce)to remove or simplify movement. - Protect interaction: animations must not block clicks, scrolling or keyboard use once the page is usable.
- Provide an escape path: include a no-JavaScript rule and a timeout or equivalent recovery for script errors.
- Control announcements: make decorative graphics hidden from assistive technology and avoid a rapidly changing live region.
- Do not blindly preload the spinner: WordPress guidance warns that preloading non-render-blocking resources can compete with render-blocking resources and slow rendering.
- Retest optimization layers: purge cache and test again after enabling minification, combining, deferred scripts or a CDN.
Troubleshooting a stuck or missing preloader
The loader never appears
- Check that the plugin is active or that the enqueue hook runs on the affected page.
- Inspect page-targeting rules and exclusions.
- Purge page, object, browser and CDN caches.
The loader never disappears
- Open the browser console for JavaScript errors.
- Temporarily disable script combination, defer or delay settings to identify an optimizer conflict.
- Confirm that the dismissal code listens for the event your implementation uses and that a timeout or no-script fallback exists.
Users see a blank screen with JavaScript disabled
Add or verify the noscript CSS rule and ensure the overlay is not the only route to page content. This is the specific failure mode documented in LoftLoader’s listing.
The page feels slower after installation
Remove unnecessary image-heavy animations, avoid preloading the loader asset, and compare the page with the preloader disabled. A preloader should conceal unavoidable waiting, not add network work or delay interaction.
Free tools Windows power users keep installed
One-click scans. No signup required.
Which option should you use?
- Choose Preloader when you want the fastest setup with display rules and no coding.
- Choose LoftLoader when Customizer controls, CSS3 effects and page-specific settings matter, provided you implement a no-JavaScript fallback.
- Choose Waito when shortcode placement and a small dependency-free script suit your theme.
- Choose custom code when you can maintain a child theme or site plugin and need exact markup, targeting and accessibility behavior.
The Bottom Line
For most site owners, start with a maintained preloader plugin, configure it on only the pages that need it, then test cache combinations and JavaScript-disabled behavior. Use custom enqueued CSS and JavaScript when branding and control justify the maintenance responsibility.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
