top of page

Real Preloader in Wix and Wix Studio

In this lesson, you will learn how to add a preloader to your Wix or Wix Studio website. Before you get started with the code, please refer to the video to learn how to apply the Preloader. Watch the video here.



CUSTOM 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.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>

    position: fixed;

    width: 100%;

    height: 100%;

    z-index: 999;

    overflow: visible;

    background: #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;

  }


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

}


    opacity: 0;

  }


</style>

 

Important things to change or make note of:

  1. You can change the 240 value (var id = setInterval(frame, 240);) to change how to long the preloader shows for. Larger number equals longer time.

  2. Under the "#preloader" style settings, go to "background:" to change the color of the background to another color. Use a HEX color code to change it to something that matches your brand. You can also use an image as the background of the preloader if wanted.

  3. Lastly, for "#loopIcon", change the "background:" to your animated GIF that you got from copying the URL from your Media Library.


Have Fun!

bottom of page