预加载器未显示在iPad和移动设备上？

如何解决预加载器未显示在iPad和移动设备上？

我一直在通过Wix制作网站，由于加载时间不理想，我想添加一个预加载器来提供帮助-特别是例如在无法立即在ipad上单击按钮的情况下。我设法找到一些放在“ Head”区域的代码，它确实显示在台式机版本上，但似乎不在ipad或移动设备上。该代码中缺少任何内容，这是为什么？还是有另一种更好的代码？

任何帮助将不胜感激-谢谢！

这是它所在的页面：https://www.ekdesigns.co.uk/

这是我的代码：

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

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%,100% {

-webkit-transform: scale(0);

transform: scale(0);

} 40% {

-webkit-transform: scale(1.0);

transform: scale(1.0);

}

}

</style>