The Divi Switch plugin by Divi Space comes with a range of useful Divi theme 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.
works great, but I had to change the content tag to "\e02d" instead of "e02d" to show the correct icon.
Hi Lukas, thanks for that. Yes there should have been a backslash, but it looks like it was getting stripped out. I've updated the post to correct this.
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…
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.
I'd been wondering how to do that, and your code worked so perfectly. Thanks for putting that up. :)