A preloader is an animated element that indicates the content is being processed in the background. It tells users that the page is loading and will be ready in a few seconds.

Add this CSS and replace the url to the gif file to a gif file in your own media library.

#et_loading { background: #fff url('https://www.mydomain.nl/wordpress/wp-content/uploads/loading.gif') no-repeat center center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; }
Code language: CSS (css)

And add this to the head of the website (e.g. in the Divi options).

<div id="et_loading"></div>
<script>
(function($) {
$(window).load(function() {
$('#et_loading').fadeOut(500);
});
})(jQuery);
</script>
Code language: HTML, XML (xml)

CSS Only

Add a preloader to a Divi website without plugin.

/** START Add preloader */
#et_loading {
background: #ffffff url('https://tst.hrcws.nl/wordpress/wp-content/uploads/loading.gif') no-repeat center center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999;
}
/** END Add preloader */

Code language: CSS (css)