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 lets visitors know that the page is loading, which can improve the user experience and reduce your 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?

Every time you visit a site, your browser downloads different parts of that website. Some parts load faster such as text and code, while images, videos, and graphics can take longer.

If a page takes a long time to load, then vistors may wonder whether your website is broken. With that being said, you may want to add a preloader. This is an animation or status that shows the page loading progress in the background.

You can see a live example of a preloader animation when adding a new post in WordPress. Simply click on the ‘Preview’ button in the post editor and WordPress will show a preloader animation while it loads the preview.

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, it’s better to focus on improving your website’s speed and performance.

On the other hand, if your site has lots of images and video embeds, then it may make sense to add a preloader animation.

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.

Method 1. Adding a Preloader in WordPress with WP Smart Preloader (Easy Method)

The easiest way to add a preloader in WordPress is by using WP Smart Preloader. This plugin has six built-in preloader animations that you can use, or you can create your own animations using custom HMTL and CSS.

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 choose from.

The plugin will show a preview of your chosen animation, so you can select different preloaders to see which one 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.

After that, you need to scroll down 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 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. You can increase or decrease this by typing a new number into the ‘Loader to Fade Out’ field.

When you’re happy with how the preloader is setup, click the ‘Save Changes’ button to store your settings.

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

Method 2. Adding a Preloader in WordPress with LoftLoader (More Customizable)

Another way to add a preloader animation to your WordPress website is using LoftLoader. This plugin comes with built-in animations and has lots of cutomization options so you can fine-tune the preloader to better suit your website.

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, go to Settings » LoftLoader Lite to configure the plugin settings. LoftLoader Lite integrates with the WordPress Customizer, so this screen should look familiar.

To get started, click ‘Display on.’ On this screen, choose whether you want to use the same preloader across your entire WordPress blog or on your homepage only.

For example, you may only want to show the preloader on your homepage when that page has lots of images and videos compared to the rest of your website.

After making your decision, click on the ‘Back’ arrow to go back to the plugin settings page.

Next, click the ‘Background’ option.

Here, you can choose the animation’s background color by clicking on the ‘Pick Color’ box. You can also adjust the background opacity and choose a new ending animation such as ‘Fade’ or ‘Slide Up & Down.’

As you make changes the preview will update, so you can try different settings to see what you like the best. When you’re happy with the background settings, click the ‘Back’ arrow.

Next, you can change the animation by clicking on the ‘Loader’ option.

You can choose a new animation by clicking the different thumbnails in the ‘Loader Animation’ box. To change the color of the preloader, 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 change how long the animation plays by selecting ‘Maximum Load Time.’

You can then type in how long the preloader should last.

Next, you may want to give users a way to close the animation. To add an exit button, click on ‘Close Button’ and then use the settings to configure your button.

When you’re happy with how the button is setup, click on the ‘Publish’ button to make your preloader live.

Now, you can visit your website to see the 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 create a landing page with WordPress, or see our expert pick of the best drag and drop WordPress page builders.

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.