JavaScript实现进度条动画技巧

.progress-bar {
  width: 300px;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}
.progress-fill {
width: 0;
height: 100%;
background-color: #4caf50;
border-radius: 10px;
transition: width 0.4s ease;
}

class ProgressBar {
  constructor(element) {
    this.container = typeof element === 'string' 
      ? document.querySelector(element) 
      : element;
    this.fillElement = this.container.querySelector('.progress-fill');
    this.currentValue = 0;
  }
// 设置进度（0-100）
setProgress(value) {
const clampedValue = Math.min(100, Math.max(0, value));
this.currentValue = clampedValue;
this.fillElement.style.width = clampedValue + '%';
}
// 动画式递增进度
animateTo(targetValue, duration = 800) {
const startValue = this.currentValue;
const startTime = performance.now();
const update = (currentTime) => {
  const elapsed = currentTime - startTime;
  const progress = Math.min(elapsed / duration, 1);
  const currentValue = startValue + (targetValue - startValue) * progress;

  this.setProgress(currentValue);

  if (progress < 1) {
    requestAnimationFrame(update);
  }
};

requestAnimationFrame(update);
}
// 快速重置
reset() {
this.setProgress(0);
}
}

// 初始化
const bar = new ProgressBar('.progress-bar');
// 直接设置进度
bar.setProgress(60);
// 带动画地增加到 90%
bar.animateTo(90, 1000); // 1秒完成
// 模拟加载过程
setTimeout(() => bar.animateTo(100), 500);