How to Add Page Preloader Animation to Divi Website?

Preloaders are an excellent way to improve user experience while your users are waiting for your webpages are to load. 

Unfortunately, Divi doesn’t have any built-in options to add a preloader to your Divi website. That’s why, in this guide, we will show you how to add a preloader to your Divi website.

Step 01: Install and Activate DiviFlash

Since Divi doesn’t let you add a preloader to your Divi website, we will need a plugin to add a preloader. In this case, we will use DiviFlash because it’s considered the best Divi plugin.

You can get the DiviFlash plugin from either the Elegant Themes marketplace or from their official website.

Once you get the DiviFlash plugin, you will have to install and activate the plugin.

Step 02: Enable the Preloader

After installing and activating the DiviFlash plugin, go to your WordPress dashboard and click on DiviFlash > Settings. Then scroll down to find “Preloader” and click on the “Customize” button beside it. 

Clicking on the customize button will take you to the theme customizer, where you can see the toggle option for enabling the preloader. When you turn this toggle option on, it will add a preloader to your Divi website and reveal all the options which you can use to customize it. 

There’s an alternative method of enabling the preloader by directly navigating to the Divi Theme Customizer. For that, from your WordPress dashboard, go to Divi > Theme Customizer >  Advanced General Settings > Preloader. 

Step 03: Customize the Preloader

Enabling the preloader will add the default preloader to your Divi website. However, the default preloader might not align with your website’s aesthetic or personal preferences.

That’s why, in the next steps we will show you how to customize the preloader. 

3.1 Select the Preloader Type

As the content of the preloader, you can either select presets or an image as the preloader.

Presets are built-in icon animations that you can use as the preloader. The DiviFlash plugin offers 29+ presets for you to use. 

To choose between presets or image as the preloader type, go over to the “Preloader Type” option, click on the dropwdown and select the type of preloader you want. 

If you choose presets, you will get a list of all the preset with option to change the size and the color of the icon. To change the color of the preloader icon, find the “Icon Color” option which is right beneath the presets. 

Under the icon color, you can see the “Scale Element” bar which you can use to adjust the prelaoder’s size.

Or, if you would like to use an image instead of the presets, simply select image from the  “Preloader Type” dropdown. Doing so will reveal an image uploader where you can upload the image you want as the preloader. 

After uploading the image, it will be displayed as the preloader instead of the preset animation. 

3.2 Add a Background Color

To change the background color of the preloader, expand the “Design” section and the first option is the “Background Color.” This is the option to change the background color of the preloader animation.  

Select the color of your choice from the color palette and it will be added as the background of the preloader animation.

3.4 Customize the Reveal Animation

Under the background color you will find the dropdown named “Reveal Animation”, you can customize the nature of how the preloader animation will appear on the screen. 

You get five different animation options for the preloader here.  

Now, customizing the reveal animation of the preloader is not enough, you should be able to adjust its timing. Meaning, how much time the preloader will take to appear and how long the preloader animation will last. 

To adjust these timing options, you will have to disable the “Enable Native Loading” option, which is turned on by default. 

Enabling the native loading options makes sure that the preloader animation matches the loading time of your webpage. That means, the preloader animation will start as soon as your webpage starts loading and will stop when the web page finishes loading.

So, when you disable the native loading option, it will reveal two bars named “Reveal Delay” (lets you adjust the delay time for the preloader) and “Reveal Duration” (that lets you adjust how long the preloader will stay on screen).

Conclusion

By following the steps we have shown in our guide, you should be able to add preloader to your Divi websites very easily. You should also be able to customize it to make it more attractive. 

However, if you still find adding and customizing the preloader difficult, please let us know in the comments and we will help you get the job done.