How to Add a Preloader Animation to WordPress (Step by Step)

Ever noticed that spinning icon or animation that appears while a website loads? That’s a preloader animation, and it’s a handy tool you can use across your WordPress projects.

Preloaders serve a real purpose. On content-heavy sites, they keep visitors engaged during those crucial loading seconds, which can reduce bounce rates.

And for business sites, a branded preloader can even add a professional touch.

If you’re thinking this sounds complicated, don’t worry. We’ve come up with 2 methods for adding a WordPress preloader animation, suitable for users of all skill levels.

Why Add a Preloader Animation in WordPress?

A preloader or a page loader is an animation you see when waiting for a page to load. It tells users that the web page is still getting ready and asks them to wait patiently. Once it’s done loading, the preloader goes away, and the visitor can see the web page normally.

Here is an example of this WordPress design element:

One scenario where you may want to add a loading animation is if your web page has lots of large images or video embeds. In this case, your page loading time will be longer than normal, and you want users to stick around long enough for the page to fully appear.

If your page doesn’t have a lot of heavy elements, then it’s better to focus on improving your website’s speed and performance. You may also want to upgrade to a better WordPress hosting provider.

With that said, let’s look at how you can easily add a page loading animation to your WordPress website. Simply use the quick links below to jump straight to the method you want to use:

How to Add a Simple Loading Animation with WP Smart Preloader

One easy way to add a preload animation in WordPress is by using WP Smart Preloader.

This plugin is a great choice if you want a quick and easy solution without getting lost in too many settings.

That’s because it has 6 built-in WordPress preloader animations that you can use, and you don’t have to configure a lot of settings to enable the animation.

The first thing you need to do is install and activate the WP Smart Preloader plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, go to Settings » WP Smart Preloader and then open the ‘Smart Preloader’ dropdown. This shows all the different animations you can use.

The plugin will show a preview of your chosen animation, so you can select different preloaders to see which you like the best.

By default, the animation will appear across your WordPress website, but if you prefer, then you can use it on your homepage only. Simply check the ‘Show only on Home Page’ box.

If you want to create your own CSS animation, then simply type your code into the ‘Custom CSS’ box.

Another option is to create a custom HTML5 animation by adding code to the ‘Custom Animation’ box.

After choosing an animation, scroll to the ‘Duration to show Loader’ section. Here, you can change how long the preloader plays for. 

The default option is 1500 milliseconds or 1.5 seconds. This should work well for most sites, but you can type in a different number if you want.

By default, the animation will take 2500 milliseconds or 2.5 seconds to fade out completely. To change this, simply type a bigger or smaller number into the ‘Loader to Fade Out’ field.

When you are happy with how the preloader is set up, just click the ‘Save Changes’ button to store your settings.

You can now visit your WordPress blog or website to see the preloader in action.

How to Add a Customizable Loading Animation With Safelayout Cute Preloader

The first plugin makes it easy to add a loading animation in WordPress. However, if you want more control over the design to match your brand, then you can check out Safelayout Cute Preloader.

To start, go ahead and install and activate the plugin in your WordPress admin area. For more details, see our guide on how to install a WordPress plugin.

Once the plugin is active, navigate to Settings » Safelayout Preloader to begin setting it up.

Step 1: Enable the Preloader and Choose a Preset

First, you need to turn the preloader on and decide where it will appear on your site.

You can start in the ‘Presets’ tab to choose a premade design. If you like one, simply click the ‘Change settings to this preloader’ button below the template.

Next, switch to the ‘Display settings’ tab.

Here, you need to check the ‘Enable Safelayout Cute Preloader’ box to make sure the plugin is working.

Then, use the ‘Display on’ dropdown to choose where to show the preloader. For this tutorial, we will choose ‘Full website.’

On this screen, you can also set the duration for the animation.

• Minimum Load Time: This sets the shortest amount of time the preloader will be visible. It’s useful if you want to ensure your branded animation is always seen for at least a moment, even if your page loads instantly.
• Maximum Load Time: This sets the longest amount of time the preloader will be visible. This acts as a safety net, automatically hiding the preloader so users aren’t stuck watching it if your page runs into a loading error.

You can also choose to display a ‘Close’ button after a few seconds have passed. Once you have made your changes, just click ‘Save Changes.’

Step 2: Customize the Core Animation

Now, you can design the look of the animation itself. This includes the background, the main icon, and an optional progress bar.

First, go to the ‘Background’ tab.

Here you can pick an animation effect, change the background color, and adjust its opacity.

If you don’t want a special background effect, just select ‘No Background.’

Next, click on the ‘Progress Bar’ tab.

A progress bar is a great way to show visitors that the page is loading.

You can choose a shape and then customize its color, position, and size.

If you don’t want one, just choose ‘No Progress Bar.’

After that, head over to the ‘Icon’ tab.

This is the main animated graphic, like a spinning circle.

You can pick an icon and then change its size, color, and animation style. If you feel an icon is too much with your other settings, you can select ‘No Icon.’

Remember to click the ‘Save Changes’ button as you finish customizing each tab.

Step 3: Add Your Branding and Text

Finally, you can add your logo and custom text to make the preloader match your brand perfectly.

Go to the ‘Brand Image’ tab and check the ‘Show brand’ box to add your logo.

Then, click the ‘Media Library’ button to upload your logo image.

You can then adjust the logo’s position and margins so it fits nicely with the other elements.

Next, let’s look at the ‘Counter’ tab.

This setting shows a percentage from 0% to 100% to indicate loading progress. You can enable it and customize its position, color, and font size.

Finally, go to the ‘Text’ tab. By default, the preloader shows ‘Loading…’ text, but you can change this to something more creative.

Simply check the ‘Show text’ box, write your own message, and customize its font, color, and position.

Once you are done, click the ‘Save Changes’ button.

And that’s it! Your preloader animation should now appear based on your configurations. You can view your site on mobile, desktop, or tablet to see it in action.

Here’s what ours looks like:

Frequently Asked Questions About WordPress Preloaders

Over the years, many readers have asked us about using preloaders. Here are the answers to some of the most common questions.

Do preloaders affect website speed?

A preloader itself doesn’t make your website faster. Its purpose is to improve the user experience by masking the loading process with a neat animation.

To actually improve your site speed, you should focus on things like caching with WP Rocket, optimizing your images, and using a high-performance hosting provider.

Are preloaders bad for SEO?

When implemented correctly, a lightweight preloader should not harm your SEO. However, a poorly coded or heavy animation could slow down the initial page load.

This can negatively affect your Core Web Vitals, which are important for search rankings. The key is to keep it simple and fast.

Can I use a preloader only on specific pages?

Yes, absolutely. Most preloader plugins let you choose where the animation appears.

You can enable it sitewide, on just the homepage, or even on specific posts and pages where you expect longer load times.

What is the difference between a preloader and a splash page?

A preloader plays while your content loads and disappears automatically.

A splash page is a separate, introductory screen that requires a user to click a link or button to enter the main website.

We generally advise against using splash pages because they create an extra step for visitors and can have a negative impact on your bounce rate and SEO.

More WordPress Tricks to Engage Your Website Visitors

Adding a preloader animation is just one of many ways to enhance your WordPress site. If you’re looking for more creative ideas to captivate your audience, we’ve got you covered:

• How to Add a Parallax Effect to Any WordPress Theme – Create depth and visual interest with this scrolling illusion technique.
• How to Add Falling Snowflakes in Your WordPress Blog – Delight your visitors with a touch of winter magic on your site.
• How to Easily Add Dark Mode to Your WordPress Website – Offer a more comfortable browsing experience with this popular feature.
• Ways to Bring Halloween Effects to Your WordPress Site – Spook up your site with these fun and festive Halloween tricks.
• How to Add an Animated Background in WordPress – Make a bold statement with eye-catching moving backgrounds.
• How to Add YouTube Video as Fullscreen Background in WordPress – Create a powerful first impression with dynamic video backgrounds.
• How to Add Infinite Scroll to Your WordPress Site (Step-by-Step Guide) – Keep visitors engaged by seamlessly loading more content as they scroll.

We hope this article has helped you learn how to easily add a preloader animation to your WordPress site. You may also want to check out our expert picks of the best drag-and-drop page builders in WordPress and our complete guide on how to edit a WordPress website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.