html 全屏loading动画

可以使用CSS和JavaScript来创建一个全屏loading动画。

首先，在HTML文件中创建一个全屏的div元素，用于包含loading动画和遮罩层：

<div id="loader-wrapper">
  <div id="loader"></div>
  <div class="loader-section section-left"></div>
  <div class="loader-section section-right"></div>
</div>

然后，在CSS文件中定义这个div的样式，以及loading动画的样式：

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
}

#loader {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  animation: spin 2s linear infinite;
}

.loader-section {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fff;
  z-index: 10;
}

.section-left {
  left: 0;
}

.section-right {
  right: 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

最后，在JavaScript文件中，使用以下代码控制loading动画的显示和隐藏：

document.onreadystatechange = function () {
  var state = document.readyState;
  if (state == 'interactive') {
       document.getElementById('loader-wrapper').style.visibility="visible";
  } else if (state == 'complete') {
      setTimeout(function(){
         document.getElementById('loader-wrapper').style.visibility="hidden";
      },1000);
  }
}

这样，当页面加载中时，loading动画就会自动显示，当页面加载完成后，loading动画就会自动隐藏。