Real preloader on a Wix website !

reverseweb · February 16, 2018, 10:11pm

Hi everyone,

Monday (12th February), Daniel Laera our developer has found the solution to integrate a real preloader on a Wix website. It works on all devices !

We are still working on it before to give an explaination to great youtubers like Nayeli for a more easier tutorial. It’s not the most easy for a beginner because it works with external codes.

For the moment you can see a preloader on the website of our agency and on a test website :

Kevin Dang
Reverseweb team

eugene-m · February 17, 2018, 5:54pm

Respect! It’s really worth a thing!
Mobile version is great. This is one of those functions that are really lacking in Wix.
Even in this version, this is a big breakthrough.

It would be great if you shared your code.

tristan-breon · February 18, 2018, 6:16pm

I agree, that’d be nice if you could share your code !

daniel-laera · February 21, 2018, 9:55am

Hello, you just have to paste this code in the embed code of wix, in the head of all pages and that’s the trick! Happy coding :-}

/* Absolute Center Spinner */ .loading { position: absolute; z-index: 999; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } /* Transparent Overlay */ .loading:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); } /* :not(:required) hides these rules from IE9 and below */ .loading:not(:required) { /* hide "loading..." text */ font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .loading:not(:required):after { content: ''; display: block; font-size: 10px; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; } /* Animation */ @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }

tristan-breon · February 21, 2018, 12:08pm

Thanks !

But in my case, nothing is clickable on the website after it finished loading

prashant-t · February 21, 2018, 9:00pm

Eugene is right , it is a Breakthrough.

My page takes 20 seconds to load and most of my clients visitors just leave the website, because no-one wants to stare at a blank screen.

The real problem was that the chrome/firefox loader on the tab stops, so people just hit refresh and the page never loads. I had the duda page open and I was just on the brink of switching to Dudaone, due to this, and I found your post.

This will really help me, thank you so much Reverseweb, so guys are amazing. : )

The code looks scary though ; )

reverseweb · February 21, 2018, 9:26pm

Thanks everyone ! The preloader was our fight and now it’s done !

Tristan, your problem is solved finally ? If it’s not the case, we can see a date to check with you.

Kevin Dang
Reverseweb team

tristan-breon · February 21, 2018, 9:56pm

No it doesnt’ work.
I’ve put the code in the header under “tracking and analytics”

reverseweb · February 21, 2018, 10:12pm

@Tristan : Vérifiez que vous avez bien copié-collé le code car des fois il s’agit juste d’un caractère !
Si le problème persiste, Daniel vous contactera demain.

Kevin Dang
Reverseweb team

matthew-morrow · February 21, 2018, 10:13pm

Same problem here - https://www.simplytelecom.co.uk/

reverseweb · February 21, 2018, 10:37pm

Try this one :

/* Absolute Center Spinner */ .loading { position: absolute; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; } /* Transparent Overlay */ .loading:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); } /* :not(:required) hides these rules from IE9 and below */ .loading:not(:required) { /* hide "loading..." text */ font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .loading:not(:required):after { content: ''; display: block; font-size: 10px; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0.5em; -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0; } /* Animation */ @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } }

prashant-t · February 21, 2018, 11:34pm

Yeah, The fight is Won.

Also, I tried the first code and it had the same problems as Triston described.

But, the Second code that you posted works well and doesn’t have any problems. : )
Thanks Kevin.

Try the second one Triston, it might work for you too.

The page is somewhat slow to load now, but I’m really happy that this works.

magnus · February 22, 2018, 6:53am

The Second one works for me.
Good job @ Reverseweb !

tristan-breon · February 22, 2018, 7:33am

Aweome, it works now !

Many thanks !

mattias · February 26, 2018, 2:40pm

It worked for me too! Awesome! Thanks a lot!

howplay · February 27, 2018, 11:02pm

Thank you. It works for me : )
But is it possible to use it for all pages???

andluism · March 2, 2018, 1:55am

The second code works on all pages! Thanks! Can the loading gif be modified?

rishabh-jain · March 9, 2018, 8:43am

This code only works when i directly go to the url
but from home page if i go the page which has loader it will not show the loading icon.
Is there any code for that?

reddany · March 17, 2018, 1:12am

I tried the second code and it works only partially. The Embeds window with the code remains small becomes full-screen. How can I solve?

reddany · March 17, 2018, 8:49am

Sorry, I was wrong where I put the code. Now put in the right place does not work in my phone. Thank you