以滚动方式在多个元素中显示进度条

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

.progress-bar {
  width: 100%;
  height: 20px;
  background-color: #f2f2f2;
}

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

// 假设操作的总进度为100
var totalProgress = 100;

// 更新进度条的宽度
function updateProgress(currentProgress) {
  var progressBar = document.querySelector('.progress');
  var progressWidth = (currentProgress / totalProgress) * 100;
  progressBar.style.width = progressWidth + '%';
}

// 示例：每秒增加10%的进度
var currentProgress = 0;
var interval = setInterval(function() {
  currentProgress += 10;
  updateProgress(currentProgress);
  
  if (currentProgress >= totalProgress) {
    clearInterval(interval);
  }
}, 1000);