通过检查类.active来增加进度条的宽度

<div class="progress-bar">
  <div class="progress"></div>
</div>
<button onclick="startProgress()">开始进度</button>

.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;
}

function startProgress() {
  var progressBar = document.querySelector('.progress');
  progressBar.classList.add('active');
  
  setTimeout(function() {
    progressBar.style.width = '100%';
  }, 100);
}