页面加载loading

实现页面加载loading可以使用CSS和JavaScript结合的方式来实现。

1. CSS实现方式

在HTML中添加一个遮罩层和一个loading动画，通过CSS设置遮罩层透明度为0，当页面加载时，通过JavaScript获取到遮罩层和loading动画的DOM元素，并将遮罩层的透明度设置为1，从而实现页面loading效果。

示例代码如下：

<!-- HTML代码 -->
<div class="loading-mask">
  <div class="loading-animation"></div>
</div>

/* CSS代码 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.5s ease-in-out;
}

.loading-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #000;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

2. JavaScript实现方式

在HTML中添加一个loading动画，通过JavaScript监听页面的加载事件，当页面加载完成后，将loading动画的DOM元素从页面中移除，从而实现页面loading效果。

示例代码如下：

<!-- HTML代码 -->
<div class="loading-animation"></div>

/* CSS代码 */
.loading-animation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #000;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

// JavaScript代码
window.addEventListener("load", function() {
  var loadingAnimation = document.querySelector(".loading-animation");
  loadingAnimation.parentNode.removeChild(loadingAnimation);
});

以上两种方式都可以实现页面加载loading效果，根据具体需要选择合适的方式。