用html js css写一个页面旋转loading效果

以下是一个使用HTML、CSS和JS编写的旋转加载效果的示例：

HTML代码：

<div class="loading">
  <div class="spinner"></div>
</div>

CSS代码：

.loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.spinner {
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-left-color: #09c;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

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

JS代码：

// 可选：在页面加载完成后隐藏加载动画
window.onload = function() {
  document.querySelector('.loading').style.display = 'none';
};

这个代码将创建一个位于页面中心的圆形加载动画，它会无限旋转，直到页面加载完毕。如果您想在页面加载完毕后隐藏动画，可以使用JS代码中的window.onload函数。