In this tutorial, we’ll show you how to replace the default loader or preloader used in the Divi FilterGrid plugin with a custom preloader. There are several different types of preloaders you can replace the default with – from modified versions of your website’s logo to free examples online. We’ll show you three different examples to cover most cases.

In case you’re not sure what a preloader is, it’s what some websites display before a page is loaded to let you know the page is loading. Instead of displaying the page in bits and pieces as each piece of the page loads, the preloader hides the entire page behind an overlay and icon until it’s completely loaded. Preloaders can also be referred to as loaders, loading icons, spinners, spinning icons, etc.

This is the Divi preloader you see when you edit a page. This is also the same preloader we use in our Divi FilterGrid plugin when a filter, search or pagination button is clicked. This lets the user know something is happening and that their click action is being processed. In the examples below, we’ll show you how to replace the default Divi preloader we use in Divi FilterGrid with three different types of preloaders:

• Pure CSS preloader
• Rotating PNG preloader using CSS animations
• Self-animated SVG preloader

Below is what each will look like:

Animated SVG preloader

Pure CSS Divi Preloader

Pure CSS preloaders are great because they are a lightweight solution and can be usually be easily modified. In the next two examples, you’ll need to download an image that either includes animation or that we’ll add animation to using CSS . With the pure CSS solution, you simply copy and paste.

There are lots of free CSS preloaders available online. Here’s a collection of preloaders available on CodePen. And here is the Pacman preloader pen taken from that collection that we’ll use in our example. Keep in mind we had to modify this pen slightly to make it work with Divi.

The Divi FilterGrid plugin has a documented custom loader filter to make it easy to replace the preloader. You can see an example on the documentation page of how to replace the default preloader with a spinning circle version. This is also a pure CSS solution that’s simple and easy to change the color to match your website’s color scheme. The examples below are simply for variation.

To replace the Divi FilterGrid default preloader with a pure CSS Pacman preloader, please copy and paste the code from this github page in your child theme’s functions.php file. The code in this example is too long to include in this tutorial. But don’t let that scare you!! There is simply a lot of CSS needed to make Pacman chomp 🙂

Rotating PNG Divi Preloader Using CSS Animations

In this example, we’ll upload a simple PNG file and animate it with CSS to make it rotate or spin. What’s great about this option is that you can use any image you want, including your logo or a modified version of your logo. You can also modify the animation to bounce, shake, pulse, etc. Animate.css is a great resource for CSS animations.

To replace the Divi FilterGrid default preloader with an animated PNG, please copy and paste the following in your child theme’s functions.php file:

* Make sure you replace the URL of the PNG in the example below with the URL of your PNG.

Self-Animated SVG Divi Preloader

In this example, we’ll upload an animated SVG file to use as our preloader. By default, WordPress does not allow you to upload SVG files for security purposes. However, SVG files are only insecure if malicious code has been added to them BEFORE you upload them to your WordPress website. You should never add an SVG image to your site that comes from an untrustworthy source. But there is nothing insecure about having a trusted SVG file on your site once it’s uploaded.

Once you have your trusted SVG downloaded, you can upload it directly to your website using FTP or Cpanel. You can also install a plugin that will allow you to upload SVG files. It wouldn’t be a bad idea to delete this plugin once you have your SVG uploaded unless you want to keep this ability.

To replace the Divi FilterGrid default preloader with an SVG preloader, please copy and paste the following in your child theme’s functions.php file:

* Make sure you replace the URL of the SVG in the example below with the URL of your SVG.