how to configire a custom preloader (spinner)

Apologies if this is a duplicate of my post in the support forum

I am attempting to change the site preloader (spinner) to a custom spinner. I created an animated GIF and added the following code in “Highend > Highend Options > General Settings > Custom CSS”

.default-loading-icon {
background-image: url(URL to my gif in the Media Library);
width: 191px;
height: 100px;
margin-top: -35px;
border: 0px!important;
}

Although my spinner works, the default circle spinner is also present.

If I set “Highend > Highend Options > General Settings > Site Preloader” to Disable, there is no spinner at all.

How can I get my custom spinner to run without the default spinner appearing?