Help with adding a preloader

Ask the community
1

Hi all,

So I want to add a preloader to my client website.

I came across this tutorial by Wix Fix and managed to install the code, but it’s loading only when I’m refreshing the site. If I jump to a new page there is no preloader.

So basically it’s loading once when entering the site and when I’m refreshing a page.

Is it possible to add something to the code that will make the preloader load with each page navigation

Thanks!

Code:

<div id="preloader">

<div id="loopIcon"></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, 240); // SET TIME FOR PRELOADER

function frame() {

if (loading == 30) {

clearInterval(id);

[preload.style](http://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](https://www.wixfix.com/learn-velo/hashtags/preloader) {

position: fixed;

width: 100%;

height: 100%;

z-index: 999;

overflow: visible;

background: [#437240](https://www.wixfix.com/learn-velo/hashtags/437240) url('https://static.wixstatic.com/media/*YOUR_ANIM_GIF_URL_HERE*') no-repeat center center; // CHANGE HEX COLOR OR EVEN ADD BACKGROUND IMAGE

display: block;

opacity: 1;

transition: 1s opacity ease-in;

}

[#loopIcon](https://www.wixfix.com/learn-velo/hashtags/loopIcon){

width:100%;

height:100%;

background:url('https://static.wixstatic.com/media/*YOUR_GIF*2.gif') no-repeat center center; // CHANGE LINK TO GIF FROM MEDIA LIBRARY

}

[#preloader](https://www.wixfix.com/learn-velo/hashtags/preloader).hidden {

opacity: 0;

}

</style>
2

Hi Aldi,
What about using Wix-animation frontend or viewport enter animation with velo instead of creating iframe widget?
Here is the example,

let fadeinOptions = {
  "duration": 200,
  ////"angle": 270,
  //"distance": 3550,
  "delay": 0
};
let fadeOptions1 = {
  "duration": 800,
  "delay": 8000
};

$w("#preloader").show("fade", fadeinOptions)
  .then(() => {
    console.log("Done with fade in");
    return $w("#preloader").hide("fade", fadeOptions1);
  })
  .then(() => {
    console.log("Fade Out Completed");
  });

Or use Wix-animaton-Frontend
wix-animations-frontend - Velo API Reference - Wix.com
Make sure you add preloader as global element like hears and footers and write the velo code in Master.js.

1 Like