WordPress Preloader Plugins: 4 Compared, Plus Code

The WordPress preloader plugin to install is Safelayout Cute Preloader: free, drawn entirely in CSS so the browser has no GIF to fetch, rated 5 out of 5 from 83 reviews with 10,000+ active installations, and updated in August 2026. If the loading screen has to carry your logo, LoftLoader does that in its free version and is the biggest plugin in the category at 70,000+ installs. If you build with Elementor Pro you already own a preloader and should install nothing at all.

Now the part the rest of this category leaves out. A preloader does not make a page load faster. It covers a page the browser is already drawing and delays the moment a visitor sees any of it, in exchange for a tidier first impression. That trade is worth making on an animation-led site and for a deliberate brand intro. On an ordinary blog, shop or brochure site it costs attention and returns nothing.

Jump to: when it is worth it · the comparison · which one fits you · the Core Web Vitals answer · the plugins · without a plugin · the verdict · questions

When is a WordPress preloader worth it?

Three situations justify covering your own page.

• An animation-led or WebGL opening. A scripted sequence has to start at frame one, and letting a visitor catch it halfway through is worse than making them wait.
• A deliberate brand intro. An agency, photographer or launch page where the logo landing on screen is part of the design, not a stand-in for slowness.
• A heavy full-screen hero. A background video or a very large image that assembles in visible stages looks broken while it does so.

Two situations do not justify it. If the page is simply slow, a preloader turns a three-second wait into a three-second wait behind a spinner. And if your layout jumps while the page settles, an overlay hides the symptom only while it is on screen. Both are fixed with caching, smaller images and width and height attributes on your images, not with an overlay.

Which WordPress preloader plugin should you use?

Four plugins in the directory are maintained well enough to install, and two of the options worth knowing about are not plugins at all. The free-version boundary decides most of these, because almost every preloader gives away the spinner and charges for the logo.

Versions, installs, ratings, tested-up-to values and free-version boundaries read from each plugin’s WordPress.org page, each vendor’s pricing page and the CodeCanyon listing on 10 September 2026.

Which preloader fits your site?

The answer depends more on why you want a loading screen than on which plugin has the most animations. Set the three inputs and the pick changes, including to “do not install one”.

Every figure and free-version boundary the chooser prints was read from WordPress.org, the vendors’ pricing pages and CodeCanyon on 10 September 2026.

Does a preloader hurt your Core Web Vitals?

It depends on how the preloader hides your page, and no settings screen tells you which it does. Google’s Largest Contentful Paint documentation defines LCP as the render time of the largest image, text block or video visible in the viewport, with 2.5 seconds or less counted as good, 2.5 to 4.0 as needing improvement and above 4.0 as poor, assessed at the 75th percentile of page loads.

Two rules in that same documentation decide what a preloader does to the number. Elements with an opacity of 0, invisible to the visitor, are not considered. And elements covering the full viewport, likely treated as background rather than content, are filtered out. So there are two kinds of preloader:

• An overlay painted on top. Your content renders underneath at its normal time and the overlay is filtered out as a full-viewport element. LCP is unaffected: the report stays green while your visitor watches a spinner.
• A page hidden until load. If the plugin holds your wrapper at opacity 0 and fades it in when loading finishes, those elements are invisible to the visitor and excluded from LCP until they appear. Your LCP is pushed out to whenever the overlay clears, and the preloader is then measurably making the score worse.

You can tell which one you have in about ten seconds. While the loading screen is showing, open the browser’s element inspector and delete the overlay node. If the finished page is sitting there fully drawn, you have an overlay and your LCP is untouched. If you get a blank screen, the plugin is hiding the page and every second the overlay stays up is a second on your LCP.

Neither result makes the preloader free. The overlay version costs you the thing LCP stands in for, a visitor who can start reading, and the metric does not see it. That is the real argument against a loading screen on an ordinary content site.

The preloader plugins, verified

Safelayout Cute Preloader

For a loading screen that adds as little as possible to the page it covers. Version 2.2.7, updated in August 2026, 10,000+ active installations, 5 out of 5 from 83 reviews, tested up to WordPress 7.0.4, requires PHP 7.0.

What decides it is the animation technology: the listing describes pure CSS animation, so there is no GIF or sprite request added to a page that is already busy. That is the smallest addition in this category, which matters more for a preloader than for any other kind of plugin.

The limitation is where the free line falls. Custom logos and brand images, 48 animation icons, 431 gradient colours, background patterns and exit effects are all Pro, so a branded loading screen means paying: $14 for one site or $39 for unlimited against a $64 regular price, with 14 days money back. Its 83 reviews are a narrow base of praise, 81 of them five-star.

Safelayout Cute Preloader on WordPress.org

LoftLoader

For a logo on the loading screen without paying, and for the largest install base in the category. Version 2.5.3, updated in May 2026, 70,000+ active installations, 4.5 out of 5 from 33 reviews, tested up to WordPress 7.0.4, requires PHP 5.6.

The free version is generous where it counts: 7 loading animations of which 2 accept a custom image, 5 ending animations, unlimited background and loader colours, a customisable close button and different loaders on different pages, all set in the Customizer.

The limitations are the release gap and the upsell. May 2026 is the longest gap of the four maintained plugins here, and its tested-to version is a release behind Preloader and BH. Progress bar, minimum load time and device rules are Pro: $26 one-off on CodeCanyon, 3,519 sales, 4.91 from 69 ratings, released on 15 May 2026. Five of its 33 reviews are one or two stars.

LoftLoader · LoftLoader on WordPress.org

Preloader

For a one-off animated GIF loading screen on a current WordPress install. Version 2.0.2, updated on 21 August 2026, 20,000+ active installations, 4.1 out of 5 from 41 reviews, tested up to WordPress 7.1, requires PHP 7.4.

It is the most recently updated of the larger plugins and the only one tested against WordPress 7.1. Custom GIF upload sits in the free version, which is the practical route to a branded loader without a licence.

The limitations are visible in the reviews. Free is 2 templates out of 37, with cookie-based display, fade speed, hide-on-mobile and per-ID targeting in premium at $19.99 for one site, $49.99 for five or $99.99 for forty, one-off, with 14 days money back. And 8 of its 41 reviews are one star, reporting the preloader getting stuck on screen and objecting to affiliate promotion in the dashboard. The stuck overlay is the one to weigh, because that failure costs you the whole page.

Preloader on WordPress.org

BH Custom CSS3 Preloader

For someone who wants ready-made loader images rather than making one. Version 2.8, updated in September 2026, 800+ active installations, 3.8 out of 5 from 6 reviews, tested up to WordPress 7.1, requires PHP 7.4 and WordPress 6.0.

It is the most recently updated plugin here, and its free version includes 8 CSS3 styles, 40 supplied preloader images, an image or logo preloader and unlimited colours, which is more given away than either bigger plugin offers.

The limitation is size and track record. At 800+ installations and 6 reviews, 2 of them one or two stars, it has the smallest user base and lowest rating here, so there is little evidence about how it behaves on an unusual theme. Install it on a site you can watch, not one you hand over.

BH Custom CSS3 Preloader on WordPress.org

Skip these. Preloader Plus was closed on WordPress.org on 6 September 2024 for a security issue and cannot be installed or updated, yet it still appears on other lists; if it is on your site, remove it. WP Smart Preloader is still listed, with 5,000+ installations and 4.4 from 25 reviews, but its last release was in 2024, it is tested only to WordPress 6.6.7 and it carries the directory’s warning about the latest three major releases. Its custom animation and CSS field is why people still look for it, and that field is not worth running unmaintained code on every page load: BH Custom CSS3 Preloader and the snippet below both give you custom CSS on something supported. Flat Preloader (3,000+ installs, last updated 2023, tested to 6.2.11) and PageLoader Lite (700+ installs, last updated 2022, tested to 6.0.12) carry the same warning. Below those, the directory’s preloader tag is a long tail with 60 to 1,000 installations and a handful of ratings each, Ultimate Preloader among them at 60+ installs.

How do you add a preloader in WordPress without a plugin?

A preloader is a fixed overlay, a CSS animation and a listener on the window load event. That is all of it, so where speed is the point this is the better answer: nothing to update and you control the behaviour instead of discovering it.

The version below fixes the two things people get wrong when they copy a snippet off a forum. It has a maximum timeout, so one stalled image or script cannot leave your page covered indefinitely. And it has a prefers-reduced-motion branch, so a visitor who has asked their system to reduce motion gets a static indicator. The noscript rule covers the third case: with JavaScript off nothing would remove the overlay, so it is never shown.

<div id="wpn-preload" role="status" aria-label="Loading"><div id="wpn-preload-spin"></div></div>
<noscript><style>#wpn-preload{display:none}</style></noscript>
<style>
#wpn-preload{position:fixed;inset:0;z-index:99999;display:flex;
  align-items:center;justify-content:center;background:#101728;
  transition:opacity .35s ease}
#wpn-preload.is-done{opacity:0;pointer-events:none}
#wpn-preload-spin{width:44px;height:44px;border-radius:50%;
  border:4px solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:wpn-spin .9s linear infinite}
@keyframes wpn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  #wpn-preload{transition:none}
  #wpn-preload-spin{animation:none;border-top-color:rgba(255,255,255,.6)}
}
</style>
<script>
(function(){
  var el = document.getElementById('wpn-preload');
  if (el === null) { return; }
  var done = false;
  function hide() {
    if (done) { return; }
    done = true;
    el.className = 'is-done';
    setTimeout(function () {
      if (el.parentNode) { el.parentNode.removeChild(el); }
    }, 400);
  }
  window.addEventListener('load', hide);
  setTimeout(hide, 4000);
})();
</script>

Where to put it. The markup has to be the first thing inside the opening body tag, or the visitor sees a flash of the page before the overlay lands. In a child theme, paste the block into header.php immediately after the body tag opens. If you would rather not touch template files, add it with the Code Snippets plugin hooked to wp_body_open, which core fires in that exact position. Do not paste it into a post or a Custom HTML block: that puts the overlay in the middle of your content instead of over the page.

Change two things before you ship it. The background #101728 should be your header colour, so the fade is not a jolt. And 4000 milliseconds is a generous ceiling; on a fast site 2000 is closer to right, because the timeout exists to rescue the page rather than pad the animation.

Which WordPress preloader should you choose?

For most people, Safelayout Cute Preloader. It is free, its animations are pure CSS so nothing extra is downloaded, it is the best-rated plugin in the category at 5 out of 5 from 83 reviews, and it was updated in August 2026. Pay the $14 for Pro only if the loading screen needs your logo on it.

If you need a logo for nothing, LoftLoader; if you need a progress bar or an intro that always plays in full, LoftLoader Pro at $26. On Elementor Pro, install neither: Page Transitions has been built in since version 3.6 and a second overlay only creates a conflict.

Skip the preloader entirely if your pages are slow or your layout jumps. An overlay fixes neither, and as the Core Web Vitals section shows, it can hide the symptom so well that your monitoring stays green while visitors keep waiting. Add a loading screen once the site is quick and the first impression is a design decision rather than a cover story.

Once you have chosen

• WordPress cache plugins compared — if the answer above was “your pages are slow”, this is the fix that shortens the wait rather than decorating it.
• WordPress image optimizer plugins — the heavy hero image that made you want a preloader is usually several times larger than it needs to be, and compressing it removes the reason for the overlay.
• WordPress animation plugins and best practices — for the sequence that plays once the loading screen clears, and how to stop it costing what the preloader just bought you.

Frequently asked questions

What is a WordPress preloader?

A WordPress preloader is an overlay, usually a spinner, progress bar or logo animation, that covers the page while the browser finishes loading it and then fades away. Plugins add it with a small stylesheet and script and let you pick the animation, the background colour and whether it appears everywhere or only on the homepage.

Does a preloader make WordPress load faster?

No. A preloader hides load time rather than reducing it. The browser fetches exactly the same HTML, CSS, scripts and images, and the plugin adds a stylesheet and a script of its own on top. What changes is that the visitor cannot see any of your content until the overlay clears, so the wait feels deliberate instead of broken.

Does a preloader hurt Core Web Vitals?

It depends on how it hides the page. Google’s LCP documentation counts the largest image or text block visible in the viewport, treats 2.5 seconds at the 75th percentile as good, and ignores elements with an opacity of 0. A preloader painted over content that has already rendered leaves LCP untouched; one that holds the page at opacity 0 until load delays LCP directly.

How do I add a preloader in WordPress without a plugin?

Put a fixed full-screen div immediately after the opening body tag, animate a spinner inside it with a CSS keyframe, and remove it on the window load event. Add a maximum timeout so a stalled asset cannot leave the page covered, and a prefers-reduced-motion rule for visitors who have asked for less animation. Roughly 30 lines, published in full on this page.

Is WP Smart Preloader still worth using?

No. It is still in the directory with 5,000+ active installations and a 4.4 rating, and its custom animation and CSS field is why people still search for it, but its last release was in 2024 and it is tested only to WordPress 6.6.7, so it carries the directory’s warning about the latest three major releases. Use BH Custom CSS3 Preloader or your own snippet for custom CSS instead.

Do Elementor and Divi have a built-in preloader?

Elementor does, in Elementor Pro only: Page Transitions has shipped since version 3.6 and its preloader accepts an icon, an image, your logo or an Elementor animation. Divi does not. Elegant Themes’ own tutorial on adding a Divi preloader installs a third-party Divi Marketplace plugin rather than switching on a theme setting, so Divi users need a plugin or the code above.