H5页面 全局添加加载动效

1、全局css代码

.spinner {
  width: 60px;
  height: 60px;
  background-image: linear-gradient(0deg,#8a76f6,#70cafe);
  
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
   
}
  
@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
  
@keyframes rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  } 50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  } 100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

 2、js代码

//获取浏览器页面可见高度和宽度 
    var _PageHeight = document.documentElement.clientHeight, 
        _PageWidth = document.documentElement.clientWidth; 
    //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px） 
    var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0, 
        _LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0; 
    //在页面未加载完毕之前显示的loading Html自定义内容 
   var _LoadingHtml =
      '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' +
      _PageHeight +
      'px;top:600;background:#FFFFFF;opacity:1.0;filter:alpha(opacity=80);z-index:10000;"><img style="margin-top:200px;" src="https://jm-talk.oss-cn-hangzhou.aliyuncs.com/static/2023-1/167324838001991.gif"/><div style="margin-top:10px;">下载中 ...</div></div></div>';
    //呈现loading效果
    document.write(_LoadingHtml);
 
    //监听加载状态改变 
    document.onreadystatechange = completeLoading; 
     
    //加载状态为complete时移除loading效果 
function completeLoading() { 
  if (document.readyState == "complete") { 
  $("#loadingDiv").fadeOut(1500);
  } 
}