Real Preloader in Wix and Wix Studio

https://youtu.be/f2GRuCSAhm4

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>
  #preloader {
    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;
  }

#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.hidden {
    opacity: 0;
  }
</style>

Enjoy!