PRELOADER How To Add A Preloader To Elementor

Preloaders (or loading animations) show the progress of the loading process of a web page. They only last a few seconds, while the server and browser work together to render your page, but can serve an important purpose – keeping visitors on your website as it loads content.

Without them, if your site is large, visitors may be forced to sit there and watch the ugly process of a page rendering, first the HTML content, then the CSS, then the font, then the images… This is a poor first impression, and if it takes too long, the visitors could easily click the “back” button and go to the second link on Google. Not good!

Loading animations are amusing and pleasing. Let’s take a look at how to a preloader to Elementor.

Adding A Preloader To Elementor With A Plugin

If you’re looking for a plugin to add a preloading animation to your Elementor website, the best out there is LoftLoader.

We’ve used this for the past several years on many projects — everything from a simple corporate website that wanted to display their logo on load, to our SpeedOpp Reports tool (enter a URL to see it in action).

The reason we recommend using this plugin with Elementor is that we’ve used it in the past, and it works well. It’s also dead-simple to set up. Here’s how.

Use Loftloader to Add A Preloader To Elementor

The first step, grab the plugin file from Envato. We’re opting for the pro version of LoftLoader because it comes with many more features than the limited Lite version. If you’re simply looking for an incredibly basic clear loader that you can’t really customize (but it’s free), scroll down to the next section. However, if you want to add a ton of customization, this is your best bet.

Once installed on your WordPress website, click the customize button (or navigate to it by going to appearances, customize). This will load the Preloader Customizer.

You now have several options to customize. Let’s run through how we set up LoftLoader on our client’s Elementor sites.

First, ensure that the preloader is enabled. Then, set your display rules. We typically set up the preloader to run on the element or home page, and if the site is fairly heavy and takes awhile to load, we’ll enable it globally.

You can also exclude pages and posts, if needed. This is helpful when it comes to landing pages, and stuff like that.

Then, set up the background. We typically use a solid, dark color that fits with the clients brand. When in doubt, go for a grey. You can also choose an image (which is nice if you’re using a background created in something like Photoshop).

One of the most important settings for the preloader is included in the background settings; “Ending Animation”. We always choose fade, but you have a bunch of choices — anything from splits to shrinks.

The next setting to manipulate is the actual loading icon itself. You can choose from a bunch of presets, but the thing that makes this tool so powerful is the fact that you can upload your own files. These can consist of an animated GIF, corporate logo, or anything else.

You can also add HTML code, so lotteries and other complex animations can be integrated. Super powerful!

For our client’s loaders, we typically act opt for a dark background, white corporate logo, or a custom-designed loading gif… something like this:

There are other less significant options like a progress loading bar, displaying the percentage or time taken to load the page, a custom message that you can display under or above your icon/logo, and more.

There are also a couple of utilities that really make this a great solution for any WordPress site, including Elementor.

Generate a shortcode to place on any page (use the shortcode block in Elementor), animate the inner elements of the preloader, apply the loading animation to specific elements (not the whole page — useful when paired with Elementors custom IDs and Classes), toggle on specific devices, and set min/max loading times.

When you’re done with the configuration, simply click “publish”, and your killer preloader will show on your selected pages.

Use Preloader Plus to Add A Preloader To Elementor

If you’re looking for a free (but more limited solution), we’ve heard good things about Preloader Plus.

Install the plugin, and you’ll be able to toggle the background, icon, progress bar and more.

Loftloader has a lite version, but it’s infuriatingly limited. Plus is easier to use, and comes with more features.

The main reason why we splurge for LoftLoader instead of Preloader Plus when it comes to our Elementor client websites, is because Loft comes with a ton of features that aren’t included in any free plug-in out there.

Additionally, if our client ever wants to change any of the preloader settings, it’s quite easy to do even if they have no knowledge of code (especially necessary to us as we market our websites as incredibly easy to use).

Adding A Preloader To Elementor With Code (Copy/Paste)

We’ve covered plugins, but this is actually our recommended method of adding a preloader to Elementor.

If you take the coding route, you get the benefits of flexibility, control, and best of all it is completely free. You may be thinking to yourself, I don’t know anything about this and I’m going to stick with the plugin, but this is fairly simple to implement in any Elementor website and will save you money.

All you need to do is copy and paste the code below. We’re going to explain how it works so you can modify it to match your website’s needs.

GIF/Image Preloader

This code was sourced from here, then modified.

<!--Preloader-->
<div id="load" class="spinner-loader"><div class="load-wrap"></div></div>

This is inserted into the header of your WordPress site (we go over how to do that in a bit).

/** Body Overlay **/
body #load {
    display: block;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9901;
    opacity: 1;
    background-color: #FFFFFF;
    visibility: visible;
    -webkit-transition: all .35s ease-out;
    transition: all .35s ease-out;
}
body #load.loader-removed {
    opacity: 0;
    visibility: hidden;
}
.spinner-loader .load-wrap {
    background-image: url("https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png");
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    height: 100%;
}

This goes into your stylesheet (you can add it to the custom css in Elementor or the custom css under appearances, customize).

Finally, we tie it together with some JS, that shows and hides the preloader when the page is loading:

<script type="text/javascript">
    // Javascript function to display loader on page load
    document.addEventListener("DOMContentLoaded", function(event) {
        var $load = document.getElementById("load");
        var removeLoading = setTimeout(function() {
            $load.className += " loader-removed";
        }, 500);
    });
</script>

This goes in the header of your site too.

There are two main things to edit if you’re looking to customize to logo and colors; both are found in the CSS.

Page Background:

background-color: #FFFFFF;

Defaults to white, change the #ffffff to change the color.

Loader:

background-image: url("https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png");

We’re using a PNG. Make sure the image is pre-sized to something like 50px by 50px. You can also use a GIF or anything else the Css backgrounds support. Change the url to your asset’s location. Here’s a simple loading gif.

background-image: url("https://i.imgur.com/llF5iyg.gif");
/** Resize it to 50px by 50px like so **/
background-size: 50px 50px;

You can also customize the time the loader is displayed: it is set to 500ms in the JS. Change the 500 to any other value to change the time it shows.

How To Add The Coded Preloader To Elementor

You can add this code by copying and pasting to Elementor. There are a few routes here.

Preloader on the entire site (Elementor method):

Assuming you have built the Header in Elementor, simply copy and paste the code from the next section, excluding all PHP aspects, so (“add_action( ‘wp_head’, function () { ?>” and “<?php } );“) into a html block, like so.

It should show the preloader overlaying everything (that’s because the JS wasn’t initiated). Save and test on the frontend.

Preloader on the entire site (another method):

1. Download the Code Snippets plugin.
2. Make a new code snippet (and apply it globally)
3. Paste the following into the code snippet:

add_action( 'wp_head', function () { ?>
<style>
/** Body Overlay **/
body #load {
    display: block;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9901;
    opacity: 1;
    background-color: #FFFFFF;
    visibility: visible;
    -webkit-transition: all .35s ease-out;
    transition: all .35s ease-out;
}
body #load.loader-removed {
    opacity: 0;
    visibility: hidden;
}
.spinner-loader .load-wrap {
    background-image: url("https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png");
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    height: 100%;
}
</style>
<div id="load" class="spinner-loader"><div class="load-wrap"></div></div>
<script type="text/javascript">
    // Javascript function to display loader on page load
    document.addEventListener("DOMContentLoaded", function(event) {
        var $load = document.getElementById("load");
        var removeLoading = setTimeout(function() {
            $load.className += " loader-removed";
        }, 500);
    });
</script>
<?php } );

Preloader on a collection of pages:

Filter like so:

<?php 
global $post;

if( $post->ID == 120) { ?>

      <!-- add the preloader code here -->

<?php } ?>

This would only apply the preloader to a specific page/post with the ID of 120. You can also use is_page and an array to select multiple pages.