为自定义进度条自动布局制作宽度约束动画

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

.progress-bar {
  width: 100%;
  height: 20px;
  border: 1px solid #ccc;
}

.progress {
  height: 100%;
  background-color: #00aaff;
  width: 0%;
  transition: width 0.5s ease; /* 添加过渡效果 */
}

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

// 设置进度条宽度的函数
function setProgressWidth(percent) {
  progressBar.style.width = percent + '%';
}

// 模拟进度更新的函数
function updateProgress() {
  var percent = 0;
  var interval = setInterval(function() {
    percent += 10;
    if (percent > 100) {
      clearInterval(interval);
    }
    setProgressWidth(percent);
  }, 500);
}

// 调用更新进度的函数
updateProgress();