Change page Load pattern

Support
#1

Hello, I need to change the pattern which appears while loading my websites’ pages.
I need to add an image instead of the regular one “Three dots”.

Change Blog Loading Image
#2

Hello Ahmed,

The three dots loader is a gif image which you can change via CSS.

Please try this code in X > Theme Options > CSS:

#x-isotope-loading {
    background-image: url(URL_OF_THE_NEW_LOADER);
}

Please change URL_OF_THE_NEW_LOADER to the URL of the image file you want to use.

Hope this helps.

#3

It didn’t work, for sorry.

#4

Hi Ahmed,

Can you also try setting your image width and height in that custom CSS rule and see if that helps.

For example:

#x-isotope-loading {
    background-image: url("http://example.com/path/to/your/image.gif");
    width: 40px;
    height: 40px;
}

If you’re still having issues, please provide us with an example page URL of your site to check the issue further.

Thanks!

#5

Hello again, I added the new code and the new image appeared but the old one is still intersecting with it.
Here is my home page: https://notbadminton.com/ and this is the gif photo

#6

Any solution?

#7

Please add this CSS code to make the circles disappear.

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

Hope that helps.

#8

The right and left dots disappeared, but the medium one still present

#9

Hello Ahmed,

Please remove the code given by @Christian_y and update it using this code instead:

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

We would loved to know if this has work for you. Thank you.

1 Like
#10

Ya, finally it’s working.
Thank you bro

#11

Glad we were able to help :slight_smile:

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.