用htmlcssjs写一个加载动画

以下是一个简单的加载动画：

HTML代码：

<div id="loader"></div>

CSS代码：

#loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #007bff;
  animation: spin 1s ease-in-out infinite;
}

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

JS代码：

// 隐藏加载动画
window.addEventListener('load', function() {
  document.getElementById('loader').style.display = 'none';
});

说明：

• HTML中的<div id="loader"></div>是一个空白的div，用于显示加载动画。
• CSS代码中的#loader是对加载动画的样式进行设置，包括它的位置、大小、形状、颜色以及旋转动画。
• JS代码中的window.addEventListener('load', function() { ... })是在页面完全加载后执行的代码。它将隐藏加载动画，使其不再显示。