Show the Divi Switch Preloader on All Pages

This post may contain referral links which may earn a commission for this site

Gritty Social's Divi Switch plugin (one of the plugins included in the Ultimate Divi Bundle) comes with a range of useful Divi customizations. One is the ability to add a pre-loader effect to the homepage, which displays a spinning icon while your page loads.

If you'd like to modify Divi Switch's pre-loaders to work on all pages, you can do so by adding CSS to Divi as follows:

.load-dark:before,
.load-light:before {
    display: block;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-content: center;
    text-align: center;
    line-height: 100%;
    -webkit-animation: curtain 3.5s forwards;
    animation: curtain 3.5s forwards;
}
.load-dark:after,
.load-light:after {
    font-family: "etModules";
    font-size: 3.4em;
    content: "e02d";
    position: fixed;
    text-align: center;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    top: 45%;
    -webkit-animation: wheel 3s forwards;
    animation: wheel 3s forwards;
}
.load-dark:before {
    background: #303030;
}
.load-dark:after {
    color: #f1f1f1;
}
.load-light:before {
    background: #f1f1f1;
}
.load-light:after {
    color: #303030;
}
Now when you use Divi Switch to switch on either the "Home Page Pre-Loader (Dark)", or "Home Page Pre-Loader (Light)", it'll be applied to all pages on your site.

Hundreds of new features for Divi
in one easy-to-use plugin

3 Comments

  1. It works perfectly, thanks ! Do you know how to change the image of the spinner ? I try to change png in the folder of plugin, but it doesn't work…

    Reply
    • Hi Sylvain, have you tried clearing your browser cache. Your browser will store the image in its cache and avoid reloading it if possible. This means even if you change the image in the folder, you won't see the updated image until the copy in your browser cache expires. Clearing your cache will force it to reload the image and should hopefully make it start displaying the new spinner for you. Let me know if that doesn't help.

      Reply
  2. I'd been wondering how to do that, and your code worked so perfectly. Thanks for putting that up. 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *