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 :
https://www.reverseweb.ch/
Kevin Dang
Reverseweb team
For those asking about making the preloader fade out or have a transition:
<div id="preloader"> </div> <script type="text/javascript"> ( function() { var preload = document.getElementById("preloader"); var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); var loading = 0; var id = setInterval(frame, 64); function frame() { if (loading == 30) { clearInterval(id); preload.style.display = "none"; } else { loading = loading + 1; if (!isMobile) { if (loading == 10) { document.getElementById("preloader").classList.add('hidden'); } } else if (isMobile) { if (loading == 14) { document.getElementById("preloader").classList.add('hidden'); } } } } })(); </script> <style> #preloader { position: fixed; width: 100%; height: 100%; z-index: 999; overflow: visible; background: #414141 url('https://static.wixstatic.com/media/*YOUR_ANIM_GIF_URL_HERE*') no-repeat center center; display: block; opacity: 1; transition: 1s opacity ease-in; } #preloader.hidden { opacity: 0; } </style>
Obviously adjust loading parameters to suit your site loading times...It is important that the maximum loading value isn't too high (in my case = 30) since preload.style.display = "none"; will not call until it reaches this, and therefore users will be able to see the site but not interact with it until loading reaches 30...
Hi everyone!
-Question 1: Is possible to control the duration time for the Preloader are showing ?
-Question 2: Is possible to do that the Preloader disappear with some effect ? (the instant disappear doesn't help to look professional)
Thanks !
Big thank to the team. It works on my site www.studiovtg.com
It does not always appear because the loading time is fast, but still there is loading time though. I prefer loading icon appear right after any click.
I hope the next step is flexible loading icon gif. This can elevate the professional outlook for any website.
Nice work bros.
I have tried everything to get load speed up. Google's web.dv telling me I need to 'Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.' I am not a coder or web designer and these are the exact reasons I used Wix. I am now too far in to get out and have no idea how to fix this. Wix needs to speed up load speeds.
Thanks Sameer Shashank, Tristan Bréon and everyone ... this is exactly what I needed. I do agree with Peter that Wix sites need to load faster but for now, it works for me.
You are all missing the point. The websites shouldn't need a pre-loader. Wix needs to sort out the speed with it's code and slow servers. All sites on Wix are extremely slow making SEO impossible. Not only is it not SEO friendly, it is NOT user friendly. Bounce rates using WIX is extremely high. This is NOT acceptable. This is NOT what WIX customers are paying for. WIX needs to get out of the darkages and live in the present world, being 2019.
Hey @Sameer Shashank and everyone- this code & thread was a GAME CHANGER for me - thank you for all your input - I adapted the code to include text and a custom GIF i created - however, now it won't "fade out" once the page loads. Can someone help me with making sure this preloader will disappear - my site page takes around 15 seconds to load!!!!! wish i had known wix was so slow :(
<div id="ProfilePreloader">
<p1> <br>We are currently setting up <br>
your custom profile <br>
</div>
<script type="text/javascript">
(
function()
{
var preload = document.getElementById("ProfilePreloader ");
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var loading = 0;
var id = setInterval(frame, 64);
function frame()
{
if(loading == 100)
{
clearInterval(id);
}
else
{
loading = loading + 1;
if(! isMobile)
{
if(loading == 90)
{
preload.style.opacity = "0";
preload.style.display = "none";
}
}
else if(isMobile)
{
if(loading == 20)
{
preload.style.opacity = "0";
preload.style.display = "none";
}
}
}
}
})();
</script>
<style>
#ProfilePreloader {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
overflow: visible;
background: #FFFFFF
url('https://static.wixstatic.com/media/3f09ac_a37bf1f2e1654542ad0349a64c370880~mv2.gif') no-repeat center center;
text-align: center;
font-family: "Poppins Extra Light",Extra-Light,Poppins;
font-size: 25px;
font-weight: lighter;
}
</style>
i was using code into my website itevs.com its working somedays then its look like same
Thanks Reverseweb!
Is there a way to make the preloader show on every page? For example, when I navigate to a new page, my page takes a few seconds to load and it would be nice to have a preloader.
Thank you!
Hey guys,
If you place the code Sameer provided in "Body" instead of "Head" (Settings-Advanced Settings-Tracking Tools & Analytics) and select "load on each new page" you will have loader for website and each subsequent page as well :)
Would still prefer a *WIX* solution :S
Thank you for this. Much appreciated. Am I the only one thinking this is a huge software bug that Wix should be fixing not their paying customers/ users? People/Clients leave the site because they thing the site isn't work and that' because it ISN'T WORKING. When is wix going to fix their speed? They can't say their sites are responsive when they are unresponsive on most mobile, tablets and desktops. What a joke.
Hi guys,
I have modified this script slightly to get a fullscreen, real GIF based preloader for website.
Here's the modified script
<div id="preloader">
</div>
<script type="text/javascript">
(
function()
{
var preload = document.getElementById("preloader");
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
var loading = 0;
var id = setInterval(frame, 64);
function frame()
{
if(loading == 100)
{
clearInterval(id);
}
else
{
loading = loading + 1;
if(! isMobile)
{
if(loading == 90)
{
preload.style.opacity = "0";
preload.style.display = "none";
}
}
else if(isMobile)
{
if(loading == 20)
{
preload.style.opacity = "0";
preload.style.display = "none";
}
}
}
}
})();
</script>
<style>
#preloader {
position: fixed;
width: 100%;
height: 100%;
z-index: 999;
overflow: visible;
background: #FFFFFF url('https://static.wixstatic.com/media/a9c507_e7dfa5241a674cd88e4f79eea3ec1013~mv2.gif') no-repeat center center;
}
</style>
I suggest the following tweaks you can make to this-
1. Figure out your site load time and change the value in either var id = setInterval(frame, 64); or if(loading == 90) to make the preloader time match your site loading time.
2. Test the mobile version to check how long its staying on and modify this line if(loading == 20) to match your timing.
Cheers
Hello colleagues,I am asking for your help. I absolutely do not understand how to do to insert the code. Do I understand correctly? On the main page of the site I add a promobox, give it a name (preloader) how do I insert my image or animation? Made on the box picture animation, but it is loaded,has lost preloader, plus the box not on the whole page and Tolok in the region. I have absolutely no idea what to do. Who can help? The code should be inserted into a page or website? How to make it to be full screen?
Nope, I just Copied / Pasted the code and changed the colors :/
But do you know how to extend the preload for like 2 secs or even 3? And how do I fade it out
Thanks anyways ^^
I've placed it in the Header, indeed.
I'm sorry I can't help you on this one :/
It still as invisible background for me, I'm placing it in the Body - End. If I place it in Head it shows a white Background but when the Preloader finishes there are still images loading, in which Body - End doesn't happen. How do I add a white Background while still using Body-End? Also how do I apply a fade out to it?
Hi,
Here is how to do it ;)
<div class="spinner" id="preloader"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> <script type="text/javascript"> (function(){ var preload = document.getElementById("preloader"); var loading = 0; var id = setInterval(frame, 64); function frame(){ if(loading == 100){ clearInterval(id); } else { loading = loading + 1; if(loading == 90){ preload.style.opacity = "0"; } } } })(); </script> <style> .spinner { position: absolute; height: 2em; width: 2em; overflow: show; margin: auto; top: 0; left: 0; bottom: 0; right: 0; width: 70px; text-align: center; } .spinner > div { width: 18px; height: 18px; background-color: #0D96B5; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } </style>
NOTE : I've changed the color of the animation, but you can change it to suit your needs ;)
Guys how can I change the Background color? I want it all white D: