Divi | Custom Preloader PHP function

divi-custom-preloader-function.php

<?php
add_action('wp_footer', 'fs_preloader_code');
function fs_preloader_code(){
  if(is_front_page()) {  ?>
	<div class="fs-preloader">
		<div class="fs-status"></div>
	</div>
	<?php  }
};
add_action('wp_head', 'fs_preloader_js');
function fs_preloader_js(){
	if(is_front_page()) {  ?>
		<style type="text/css">
			/* -- LOADER -- */
			.fs-preloader {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #ffffff;
				z-index: 10000001;
				height: 100%;
				width: 100%;
				overflow: hidden !important;
			}
			.fs-preloader .fs-status {
				width: 260px;
				height: 260px;
				position: absolute;
				left: 50%;
				top: 50%;
				background-image: url(/wp-content/uploads/favicon.png);
				background-repeat: no-repeat;
				background-position: center;
				-webkit-background-size: contain;
				background-size: contain;
				margin: -130px 0 0 -130px;
				-webkit-animation: fs-fadein 2s; /* Safari, Chrome and Opera > 12.1 */
				animation: fs-fadein 2s;

			}
			@media (max-width: 767px) {
				.fs-preloader .fs-status {
					width: 130px;
					height: 130px;
				  	margin: -65px 0 0 -65px;
				}
			}
			@keyframes fs-fadein {
				from { opacity: 0; }
				to   { opacity: 1; }
			}

			/* Safari, Chrome and Opera > 12.1 */
			@-webkit-keyframes fs-fadein {
				from { opacity: 0; }
				to   { opacity: 1; }
			}
		</style>
		<script type="text/javascript">
			// makes sure the whole site is loaded
			jQuery(window).load(function () {
				"use strict";
				// will first fade out the loading animation
				if( jQuery( '.et-bfb' ).length <= 0 && jQuery( '.et-fb' ).length <= 0){ 
		  			jQuery('.fs-status').delay(1000).fadeOut(1000);
		  			// will fade out the whole DIV that covers the website.
		  			jQuery('.fs-preloader').delay(1000).fadeOut(1000);
				}else{
		  			jQuery('.fs-preloader').css('display','none');
				}
	  		}); 
		</script>
	<?php  }
};