html + css 写一个循环加载的进度条

要创建一个简单的HTML和CSS循环加载的进度条，你可以使用CSS动画和JavaScript。这里有一个基本示例：

HTML:

<div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>

CSS (包含一些关键帧动画):

.progress-bar-container {
  width: 200px;
  height: 20px;
  background-color: #f1f1f1;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #4caf50; /* 进度条颜色 */
  border-radius: 10px;
  transition: width 1s ease-in-out infinite; /* 动画效果 */
}

/* 动画关键帧 */
@keyframes progress-bar-animation {
  0% {width: 0;}
  50% {width: 90%;}
  100% {width: 0;}
}

JavaScript (可选，用于手动触发动画，例如每秒一次):

function startLoading() {
  const progressBar = document.querySelector('.progress-bar');
  setInterval(() => {
    if (progressBar.style.width === '90%') {
      progressBar.style.width = '0';
    } else {
      progressBar.style.width = '90%';
    }
  }, 1000); // 每秒运行一次
}

startLoading(); // 加入到DOM加载完成后立即执行

这个例子中，进度条会从0%开始，然后在1秒内增加到90%，之后回到0%，形成一个无限循环的效果。