css监听页面加载动画

网页加载速度是影响用户体验的重要因素之一。为了缓解用户等待页面加载的时间，可以使用CSS创建页面加载动画。下面是一段CSS代码，用于创建简单的页面加载动画：

.loading{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}
.loading:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: loading 0.8s linear infinite;
}
@keyframes loading{
  0%{
  
  transform: rotate(0deg)
}
  100%{
  
  transform: rotate(360deg)
}
}
 

上述代码中，创建了一个名为“loading”的类用于包含页面加载动画，并设置了其在屏幕中央显示。通过:before伪元素创建了一个白色的圆形元素，在元素的边框中使用了透明色，使得元素具有边框的旋转效果。同时，为元素的旋转动画指定了名称为“loading”的关键帧动画。

下面是一段JavaScript代码，用于监测页面的加载情况:

document.onreadystatechange = function(){
  var state = document.readyState;
  if(state == 'interactive'){
  
  //页面正在加载
 &
nbsp;
  document.querySelector('.loading').style.visibility = "visible";
}
else if(state == 'complete'){
  
  //页面加载完成
 &
nbsp;
  setTimeout(function(){
  
   
 document.querySelector('.loading').style.display = "none";
  
}
, 1000);
}
}
 

上述代码将document对象的onreadystatechange事件绑定了一个函数，用于监测页面的加载情况。当页面正在加载时，将定义好的loading类的visibility属性设置为“visible”，从而显示加载动画。当页面加载完成时，等待1秒后将loading类的display属性设置为“none”，从而隐藏加载动画。

以上是使用CSS和JavaScript监测页面加载情况的方法。对于不同的项目和需求，我们可以根据需要调整CSS和JavaScript代码，定制符合自己项目需求的页面加载动画。