遮罩层以及加载

css：

#Mask {                           //遮罩层
  position: absolute;
  top: 0px;
  filter: alpha(opacity=60);
  background-color: #333;
  z-index: 1002;
  left: 0px;
  opacity: 0.5;
  -moz-opacity: 0.5;
}
.loaderVF {                        //加载图标
  border: 3px solid gray;
  border-top: 3px solid white;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  animation: spin 1s linear infinite;
  margin: auto;
  display: flex;
}
@keyframes spin {                   //旋转动画
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

html：

<div id="Mask">
     <div class="loaderVF" style="display: none"></div>
</div>

js： 

show() {
      $("#Mask").css("height", $(document).height());//当前页面的高度
      $("#Mask").css("width", $(document).width());//当前页面的宽度
      $("#Mask").css("display", "block");//显示遮罩层
      let screenHeight = $(window).height();//获取窗口高度
      let tctop = (screenHeight - 100) / 2;
      let scrollTop = $(document).scrollTop();//获取滚动高度
      $(".loaderVF").css("margin-top", tctop + scrollTop);//加载图标上下位置
      $(".loaderVF").show();//显示图标
    },