A Beginners Guide To Add A Preloader Animation To WordPress

The loading speed of your page has a vital role to play in the performance of your website. Your users may get frustrated and irritated if your page takes more than a second or two to load completely. This may result in your visitors leaving the page and never coming back. However, having some element that can keep the visitors engaged while your page is being loaded can help a lot. In this post, we will see what a preloader is, how it can help you. Along with that, you will find a step-by-step guide to add a preloader animation to WordPress. So, let's begin.

A ‘Preloader Animation’ or simply a page loading animation can be an interesting way to inform the audience that your web page is loading and it engages them so that they stay on the same page. This will be great in improving the user experience and reducing the bounce rate for your website.

What’s Preloader Animation?

A preloader animation indicates to users that the page is loading actively (and it is not stuck). A preloader animation is a simple animation that acts as a progress indicator for the page that is loading only certain pieces of content at a time.

To give visitors something more enjoyable and interesting to look at while your page loads in the background, preloaders are best. These will keep the visitors intact by offering some animations that are interesting to look at for a few seconds till your web page finishes loading. In some of the cases, there are preloaders that provide an indication to the users regarding the time left for loading the page completely.

Why Using Preloader Animation Will Help You?

Users completely hate it if the page doesn’t load within a second or two. They don’t like the lag. This fact is known by every web developer but sometimes, things are not in control and the reasons can be different as your website may not perform up to the mark resulting in slow loading pages. Server interruptions, poor internet connectivity, or data overloads can add to this. Even though developers take all possible efforts and precautions to minimize them, these issues can still arise anytime and are beyond prediction.

Adding screen animation has an important role to play since it can grab the attention of the users and makes them wait patiently while your screen loads. When you add a loading animation to your site, it is less like to happen that a user navigates away from your page. However, you need to take care that the animation needs to be interesting enough to hold the users’ attention.

With the preloader animations, there is also an opportunity for you as a brand to show your animated logo. This will help in establishing a strong connection between your visitors and your brand. With the brand logo, you will be able to create a strong bond and your visitors are likely to visit your site again.

How To Add a Preloader Animation To WordPress?

There are two simple ways in which you can achieve this. One is by using the plugin and another is without using a plugin i.e. manually.

Adding Preloader Using A Plugin

There are several WP plugins available that enable you to add a preloader to your WordPress site. The LoftLoader, Preloader, Pageloader, etc. Now, let us try to know by this guide to add a preloader animation to WordPress using a preloader plugin.

Begin navigating from the WordPress dashboard. Go to Plugins, and under that, select Add New. Then you have to search for WP Smart Preloader Plugin. This is the plugin we are going to use for adding a preloader to the WP site. Install this plugin and activate it.

Then, navigate to Preloader settings. The preloader settings have a simple interface that allows you to choose the preloader image, its background color, as well as the pages where you wish to display the animations. Once you are done, save the changes.

In order to choose the background color, you need to enter the hex code. Using a URL, you can select the Preloader image. You will be able to display the reloader on any of the pages such as the front page, the home page, etc. or on the entire website also.

Adding a Preloader To WordPress Manually

Using CSS, you can add a preloader animation to your site manually. In order to do this, you will be requiring the CSS source code of a preloader animation. This can be obtained from a number of websites available such as Ladda, NProgress, Pace.

Follow The Below Steps:

1. First you have to add the HTML code given below beneath the body tag of the index.html file of your WP site.

<!–CSS Spinner–>

</div>

2. Next, you need to copy the CSS source code of the preloader animation. Once you copy the code, paste this code into the CSS stylesheet of your site.

3. You need to ensure that the elements loading should be hidden by covering the entire window. For this, there is a need to add the code given below in the CSS stylesheet.

.loader-wrapper {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ff6347;

z-index: 999999;

}

4. What you need to do in the next step is, remove the value of the margin in the loader class and change the value of position to absolute, left to 48% and top to 48%. With this, you will be able to bring the spinner to the center of the division.

5. To make the spinner function, you need to add jQuery. In the index.html file before the body tag. Add the code shown below:

$(document).ready(function() {

//Preloading animation

preloaderFadeOutTime = 600;

function fadePreloader() {

var preloader = $(‘.loader-wrapper’);

preloader.fadeOut(preloaderFadeOutTime);

}

fadePreloader();

});

</script>

6. After you have added the preloader animation to WP, you can add the preloader transitions for moving the preloader sections out of view. To do this, you need to open the main, CSS file and add the code given below:

/* Loaded */

.loaded #loader-wrapper .loader-section.section-left {

-webkit-transform: translateX(-100%);

}

.loaded #loader-wrapper .loader-section.section-right {

-webkit-transform: translateX(100%); }

For hiding the preloader, you can set the opacity to 0. However, this can sometimes make the content inaccessible. That is why you also need to change the visibility to hidden.

Hope this guide to add a preloader animation to WordPress was a great help to you as you are now familiar with the ways in which you can add a preloader to your WP site.

Try out top WordPress themes on our website and buy our best WP bundle for an amazing package of WP themes.

Back to blog