如何使用JavaScript为一个简单的进度条添加动画？

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

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #f0f0f0;
}

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

// 获取进度条元素
const progressBar = document.querySelector('.progress');

// 定义一个函数来更新进度条的宽度
function updateProgress(progress) {
  progressBar.style.width = `${progress}%`;
}

// 模拟进度增加的过程
let progress = 0;
const interval = setInterval(() => {
  progress += 10;
  if (progress > 100) {
    clearInterval(interval);
  }
  updateProgress(progress);
}, 1000);