Image Preloader with CSS Colour not displaying

Question

I'm trying to add preloader to wordpress website using divi attached. However, I'm having problems getting the preloader to even display.

This is the '.gif' I'm using, and ideally I'd like it to be a white background with gold type colour '#A7784A' as the loader. Thus, I'm trying to apply that with CSS.

I think the error is coming from CSS but not 100% sure. Any advice would be much appreciated. Thanks

HTML Code at Body

jQuery(window).load(function() {
  if (jQuery('.et-bfb').length <= 0 && jQuery('.et-fb').length <= 0) {
    jQuery('.loader').delay(1000).fadeOut("slow");
    jQuery('.overlay-loader').delay(1000).fadeOut("slow");
  } else {
    jQuery(".overlay-loader").css('display', 'none');
  }
})

.overlay-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  opacity: 1;
  z-index: 999999;
  height: 100%;
  width: 100%;
  overflow: hidden !important;
  margin: auto;
}

.loader {
  position: absolute;
  left: 50%;
  top: 40%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  width: 75px !important;
  height: 75px !important;
  margin: 0px 0 0 -30px;
}

.cssload-loader {
  position: relative;
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
  background-image: url(assests/dp-loader8.gif);
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  perspective: 1200px
}

.cssload-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%
}

.cssload-inner.cssload-one {
  left: 0;
  top: 0;
  animation: cssload-rotate-one .85s linear infinite;
  -o-animation: cssload-rotate-one .85s linear infinite;
  -ms-animation: cssload-rotate-one .85s linear infinite;
  -webkit-animation: cssload-rotate-one .85s linear infinite;
  -moz-animation: cssload-rotate-one .85s linear infinite;
  border-bottom: 5px solid #A7784A;
}

.cssload-inner.cssload-two {
  right: 0;
  top: 0;
  animation: cssload-rotate-two .85s linear infinite;
  -o-animation: cssload-rotate-two .85s linear infinite;
  -ms-animation: cssload-rotate-two .85s linear infinite;
  -webkit-animation: cssload-rotate-two .85s linear infinite;
  -moz-animation: cssload-rotate-two .85s linear infinite;
  border-right: 5px solid #A7784A;
}

.cssload-inner.cssload-three {
  right: 0;
  bottom: 0;
  animation: cssload-rotate-three .85s linear infinite;
  -o-animation: cssload-rotate-three .85s linear infinite;
  -ms-animation: cssload-rotate-three .85s linear infinite;
  -webkit-animation: cssload-rotate-three .85s linear infinite;
  -moz-animation: cssload-rotate-three .85s linear infinite;
  border-top: 5px solid #A7784A;
}

@keyframes cssload-rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  }
}

@-o-keyframes cssload-rotate-one {
  0% {
    -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
  }
  100% {
    -o-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  }
}

@-ms-keyframes cssload-rotate-one {
  0% {
    -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
  }
  100% {
    -ms-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  }
}

@-webkit-keyframes cssload-rotate-one {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  }
}

@-moz-keyframes cssload-rotate-one {
  0% {
    -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
  }
  100% {
    -moz-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  }
}

@keyframes cssload-rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  }
}

@-o-keyframes cssload-rotate-two {
  0% {
    -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
  }
  100% {
    -o-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  }
}

@-ms-keyframes cssload-rotate-two {
  0% {
    -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
  }
  100% {
    -ms-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  }
}

@-webkit-keyframes cssload-rotate-two {
  0% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
  }
  100% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  }
}

@-moz-keyframes cssload-rotate-two {
  0% {
    -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
  }
  100% {
    -moz-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  }
}

@keyframes cssload-rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  }
}

@-o-keyframes cssload-rotate-three {
  0% {
    -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
  }
  100% {
    -o-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  }
}

@-ms-keyframes cssload-rotate-three {
  0% {
    -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
  }
  100% {
    -ms-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  }
}

@-webkit-keyframes cssload-rotate-three {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  }
}

@-moz-keyframes cssload-rotate-three {
  0% {
    -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
  }
  100% {
    -moz-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="overlay-loader">
  <div class="loader">
    <div class="cssload-loader">
      <div class="cssload-inner cssload-one"></div>
      <div class="cssload-inner cssload-two"></div>
      <div class="cssload-inner cssload-three"></div>
    </div>
  </div>
</div>