Need Help with Preloader code Editor X

ok, so i just made a code for my website that i made with editor x, and i wanted to display a preloader showing on all pages (instantly when browser refreshing, or, when you interact with a button or with the menu… of the site)
So for that, the code is working, but i have a problem, when the site has finished loading, all elements like, pictures, menu… are completly blurred: here is a pic from

i think it’s coming from the java script line, but not sure at all.
Here is my code :

.spinner { position: absolute; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; text-align: center; width: 40px; height: 40px; background-color: #888888; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /style> sorry for the long read... anyway... best, Alexandre

Here is the original site display without the preloader lines from ‘’ analytics and monitoring tools’’

Hi Just asking, the above are all preloader codes?

May i know why when i input your code, error shows up?

As you are using html code for this, Wix won’t provide support for help with third party provided code, as stated in the pages here.
https://support.wix.com/en/article/using-iframes-to-display-visible-content-on-your-site
https://support.wix.com/en/article/embedding-custom-code-to-your-site

Have a look here at this previous forum post about using a preloader as it gives you a good working example and is in the same style with using html in a custom new tool in Tracking and Analytics.
https://www.wix.com/corvid/forum/community-discussion/real-preloader-on-a-wix-website

Or outside websites here.
https://www.vorbly.com/Vorbly-Code/WIX-CODE-HTML-PRELOADER
https://futurevisionweb.wixsite.com/futurecodemain/preloader-tool

Finally, with your last line here…
So for that, the code is working, but i have a problem, when the site has finished loading, all elements like, pictures, menu… are completely blurred…

This can mean that the page is not fully loaded yet and the images are simply shown blurred (like low res samples) until the page has fully loaded.

Note that the larger your used images are, then the longer it will take for them all to load.

As stated here.
https://support.wix.com/en/article/request-disable-the-loading-of-low-resolution-images-before-the-high-resolution-ones
https://support.wix.com/en/article/setting-the-image-quality-for-wix-pro-gallery-images
https://support.wix.com/en/article/media-and-site-performance

But tracking tools and analytics have to upgrade site in order to add codes…Is there any way i can able to add without upgrading?

Is there any other way to create a preloader in editor x?

If you use html on your page or in Tracking and Analytics, then no as you need a premium site for it. You would need to use javascript on your page instead.

Wix did have an old preloader example that did just that, however it seems to have been taken down and I can’t find it elsewhere.
https://www.wix.com/corvid/example/Preloader
(Just goes to the 404 not found page)

The sample is just showing an effect, putting a pre-loader in the onReady function doesn’t show it until all elements are loaded. You want to add a pre-loader when page starts to load and then hide it when the page is loaded.

There is this old forum post about it which gives the full code for it.
https://www.wix.com/corvid/forum/community-discussion/preloader-with-lightbox-not-working

You can see other peoples take on that original tutorial here.
How To Create A Custom Preloader Screen in Wix
https://www.picklewix.com/wix-preloader

Wix have a welcome screen option for mobile devices that you can use as a preloader for mobiles.
https://support.wix.com/en/article/adding-a-welcome-screen-to-your-mobile-site