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

Do you want to add a preloader animation to your WordPress site? 

A preloader is an animation showing the progress of a page loading in the background. This assures users the website is loading and can help improve the user experience and reduce the overall bounce rate.

In this article, we’ll show you how to add a preloader to WordPress, step by step.

What is a Preloader Animation and Why Add it to WordPress?

A preloader is an animation or status message that shows page loading progress in the background.

Usually, when you visit a site, your browser starts downloading different parts of the website. Some parts load faster, like text and code, while images, videos, and graphics can take longer.

If most of your content is text with very few images and videos, then you don’t really need to add a preloader to your website. Instead, you should focus on improving website speed and performance.

On the other hand, if most of your content is images and video embeds, then your users will need to wait a while before they can see your content.

During these partial downloads, your website may feel slow. Sometimes users may even think your site is broken. A preloader will fill the gap and show the user a progress indicator while the page loads.

You can see a live example of a preloader by clicking the ‘Preview’ button while writing a blog post in WordPress.

WordPress will open a live preview of your blog post in a new window. It will display a preloader before showing the live preview.

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

• Adding a preloader in WordPress with WP Smart Preloader
• Adding a preloader in WordPress with LoftLoader

Method 1. Adding a Preloader in WordPress with WP Smart Preloader

This method is recommended because it’s easier for beginners and doesn’t require you to add code to WordPress or make changes to your WordPress theme.

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, you need to visit Settings » WP Smart Preloader and choose a preloader style or page load animation. 

The plugin comes with six built-in animations to choose from. Simply select the animation from the ‘Select Preloader’ drop down. You can also upload your own custom HTML and CSS to create a custom preloader.

Next, you can make the preloader appear only on the homepage by checking the ‘Show only on Home Page’ option.

After that, you need to scroll down to the ‘Duration to show Loader’ section. Here you can change the duration for the preloader. 

The default option is 1500 milliseconds or 1.5 seconds, which should work for most sites, but you can change this if you want.

You can also set how long the loader takes to fade out completely. The default option is 2500 seconds or 2.5 seconds.

Once you’re done customizing your preloader settings, click the ‘Save Changes’ button to save your settings.

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

Method 2. Adding a Preloader in WordPress with LoftLoader Plugin

Another way to add a preloader animation to your WordPress website is using the LoftLoader plugin. 

The first thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.

Upon activation, you need to go to Settings » LoftLoader Lite to configure the plugin settings. 

First, you need to make sure the ‘Enable LoftLoader’ button is clicked and has a checkmark.

After that, you can click the ‘Display on’ option.

Then, choose whether you want the preloader to display across your entire site or only on the homepage.

Next, click the ‘Back’ arrow to go back to the plugin settings page.

After that, click the ‘Background’ option.

Here, you can choose a new background color by clicking the color in the ‘Pick Color’ box. You can also adjust the background opacity and choose a new ending animation.

After customizing your background click the ‘Back’ arrow again.

Next, click the ‘Loader’ menu option to change your default preloader.

You can choose a new animation in the ‘Loader Animation’ box. If you want to change the color or the preloader, then simply select a new color in the ‘Pick Color’ box.

Once you’ve done that, click the ‘Back’ arrow to go back to the main settings screen.

Next, click the ‘More’ menu option. 

Here, you can set the maximum loading time for your preloader and have a close button appear, so users can exit the loader.

Click the ‘Maximum Load Time’ menu to set a maximum loading time.

Then, set your maximum loading time in seconds. 

After that, you can click the ‘Back’ button to add a close button to your preloader. However, we’ll keep the default settings so it doesn’t appear.

Once you’re done customizing your preloader, make sure to click the ‘Publish’ button to make your preloader live. 

Now, you can visit your website to see your new preloader in action. 

We hope this article helped you learn how to add a preloader animation to WordPress. You may also want to see our guide on how to get a free email domain and our picks on the best payroll software for small businesses.

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.