html css js精美加载中动画代码

                                以下是一个使用HTML、CSS和JavaScript实现的精美加载中动画代码示例：
复制

HTML：

<div class="loader">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>复制

CSS：

.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff4d00;
  margin: 5px;
  animation: bounce 1s infinite ease-in-out alternate;
}
 
@keyframes bounce {
  0% {
    transform: scale(1);
    background-color: #ff4d00;
  }
  50% {
    transform: scale(1.5);
    background-color: #ffa400;
  }
  100% {
    transform: scale(1);
    background-color: #ff4d00;
  }
}复制

JavaScript：（放在``标签内或外部的JS文件中）

window.onload = function() {
  var loader = document.querySelector('.loader');
  loader.style.display = 'none';
}复制

这段代码创建了一个圆形加载中动画，按照一定的时间间隔，让三个圆形动态改变大小和颜色。使用Flexbox布局将动画居中显示，并通过JavaScript代码在页面加载完成后隐藏加载动画。