Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

How to add a preloader animation 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.

WordPress preloader example

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 WP Smart Preloader WordPress plugin

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.

Adding a preloader animation in WordPress

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.

Changing the preloader animation duration

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 one preloader example

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.

The Loftloader Lite WordPress plugin

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.

Customizing the preloader animations in WordPress

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.’

Set LoftLoader background and opacity settings

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.

Choose LoftLoader animation

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.’

Changing the maximum load time in WordPress

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.

Adding exit buttons to a WordPress animation

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. 

LoftLoader preloader example

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

2 CommentsLeave a Reply

  1. Hi, I am a non techie. Is preloader possible only with plugins or can acheive by code as well? I feel it will be good to minimize plugins as much as possible to avoid unncessary conflicts with theme updates or with others in future.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.