Change Blog Loading Image

[alizandi]

On dnacademy.com/blog I have the following “page loading” image, which is the default:

I’d like to change it to https://www.dnacademy.com/wp-content/uploads/2020/04/loading.gif

I’ve tried the code (just the first ID and both ID and classes, listed below) on Change page Load pattern, but it doesn’t work:
#x-isotope-loading {
background-image: url(“https://www.dnacademy.com/wp-content/uploads/2020/04/loading.gif”);
width: 40px;
height: 40px;
}

.x-loading, .x-loading:before, .x-loading:after {
border-radius: 0;
animation-fill-mode: none;
animation: none;
}

I’m entering it in X > Theme Options > CSS

Any idea how to get my loading image to load instead of the standard?

Thank you in advance!

[ruenel]

Hello @alizandi,

Thanks for writing in!

Your code is missing somethings. Please have it updated and use this:

#x-isotope-loading {
    background-image: url("https://www.dnacademy.com/wp-content/uploads/2020/04/loading.gif");
    background-size: cover;
    background-position: center;
    width: 140px;
    height: 140px;
    border-radius: 0;
    animation-fill-mode: none;
    animation: none;
}

.x-loading:before, 
.x-loading:after,
.x-loading span {
    display: none;
}

Be very careful with how you copy and paste the code. Most of the time, the double quotes gets screw up and the background image will just not display in your site.

We would love to know if this has worked for you. Thank you.

[alizandi]

That worked. Thank you!

[friech]

You’re most welcome,

Cheers!