如何创建一个进度条，它将改变颜色每隔20%和时间间隔(毫秒)，直到它被填满？

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

.progress-bar {
  width: 200px;
  height: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.progress {
  width: 0%;
  height: 100%;
  background-color: #00aaff;
  transition: width 200ms ease-in-out;
}

function fillProgressBar() {
  var progressBar = document.querySelector('.progress');
  var width = 0;
  var interval = setInterval(frame, 200);

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

  function changeColor() {
    if (width % 20 === 0) {
      var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff'];
      var colorIndex = width / 20 - 1;
      progressBar.style.backgroundColor = colors[colorIndex];
    }
  }
}

fillProgressBar();