Hello! Need advice, I use the preload code from this topic https://www.wix.com/corvid/forum/community-discussion/real-preloader-on-a-wix-website . But after switching to another page in the mobile version there is one caveat. After clicking on the link for several seconds, nothing happens, and only after that does the animation of the preloader begin. My question is whether it is possible to somehow modify this code so that it uses the same mechanism when exiting the page. So that the user immediately understands that he clicked on the link. The same GIF files will be used, and there will be an inconspicuous replacement of one GIF with another. Theoretically, the transition will be even smoother.
<div id="preloader">
<div id="IMG-preloader">
</div>
</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 == 60) {
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: #fff;
opacity: 1;
transition: 2s opacity ease-in;
display: flex;
justify-content: center;
align-items: center;
}
#preloader.hidden {
opacity: 0;
}
#IMG-preloader {
background: url('https://static.wixstatic.com/media/518861_9dc6bb9780dc4258b4bd172210390972~mv2.png/v1/fill/w_960,h_960/ZOEK-avatar-fondo-blanco.png') no-repeat center center;
background-size:320px 320px;
width: 320px;
height: 320px;
margin:0 auto;
}
</style>
Where are you using this code? Wix sites don’t support embedded HTML except in HtmlComponents , and Tracking and Analytics.
Also, Corvid doesn’t support accessing the DOM so document can’t be used.
Following on from Yisrael, that preloader will only work the first time that you load up the site, either on your desktop or mobile device.
So, when you move from that first page onto another new page, the preloader won’t be shown again.
If you want to have the preloader on every page, then you should go back to the preloader post and read Omit’s post about doing it.
Preloader as listed here only works like that, on first page load, not inbetween pages. For that, you need to incorporate INTENRAL PRELOADERS which in my opinion make everything even slower than they need to be unless you have some really heavy content like a major complicated form or something that might take a few seconds to download fully and respond to user action, then those preloaders are much more justified.
Also, note that you don’t need a preloader on mobile devices as you can easily just use the Wix Mobile Welcome Page.
https://support.wix.com/en/article/adding-a-welcome-screen-to-your-mobile-site
I’ve used both myself and they work fine together with the preloader on desktop and welcome page on mobile.
<div class="sk-circle" id="preloader">
<div class="sk-circle1 sk-child"></div>
<div class="sk-circle2 sk-child"></div>
<div class="sk-circle3 sk-child"></div>
<div class="sk-circle4 sk-child"></div>
<div class="sk-circle5 sk-child"></div>
<div class="sk-circle6 sk-child"></div>
<div class="sk-circle7 sk-child"></div>
<div class="sk-circle8 sk-child"></div>
<div class="sk-circle9 sk-child"></div>
<div class="sk-circle10 sk-child"></div>
<div class="sk-circle11 sk-child"></div>
<div class="sk-circle12 sk-child"></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>.sk-circle {
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 40px;
height: 40px;
position: absolute;
}
.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #2B2877;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg); }
.sk-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg); }
.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg); }
.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg); }
.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg); }
.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg); }
.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }
.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg); }
.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
Dear masters, thanks for your answers, but let’s abstract from the preloader code. Any ideas what can be done with the problem of a few seconds of inactivity after clicking on a link to another page?
