有没有一种方法可以用纯javascript将一个接一个的进度条动画化？

是的，可以使用纯 JavaScript 将一个接一个的进度条动画化。以下是一种常见的实现方法：

首先，创建一个 HTML 元素作为进度条的容器，可以是 <div> 或 <span> 等。
使用 CSS 设置进度条的样式，例如设置宽度、高度、背景颜色等。
在 JavaScript 中，使用定时器或者异步操作来模拟进度的增加。
在每个时间间隔或者异步操作完成后，更新进度条的宽度或者其他样式属性，以展示进度的变化。
当进度达到100%时，停止定时器或者结束异步操作。

以下是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .progress-bar {
      width: 200px;
      height: 20px;
      background-color: #f0f0f0;
      border-radius: 10px;
      overflow: hidden;
    }
    
    .progress {
      width: 0;
      height: 100%;
      background-color: #00aaff;
      transition: width 0.5s ease-in-out;
    }
  </style>
</head>
<body>
  <div class="progress-bar">
    <div class="progress"></div>
  </div>

  <script>
    function animateProgressBar() {
      var progressBar = document.querySelector('.progress');
      var width = 0;
      var interval = setInterval(frame, 10);

      function frame() {
        if (width >= 100) {
          clearInterval(interval);
        } else {
          width++;
          progressBar.style.width = width + '%';
        }
      }
    }

    animateProgressBar();
  </script>
</body>
</html>

在上述示例中，我们创建了一个进度条容器 .progress-bar，其中包含一个表示进度的子元素 .progress。通过 JavaScript 中的 setInterval 函数，每隔10毫秒调用一次 frame 函数，该函数会更新进度条的宽度，直到达到100%为止。

这只是一个简单的示例，你可以根据实际需求进行修改和扩展。如果你想了解更多关于 JavaScript 的进度条动画实现方法，可以参考以下链接：