JavaScript实现简易进度条组件

<div class="progress-bar">
  <div class="progress-fill" id="progressFill"></div>
</div>
<button onclick="setProgress(25)">25%</button>
<button onclick="setProgress(50)">50%</button>
<button onclick="setProgress(100)">100%</button>

.progress-bar {
  width: 300px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  width: 0;
  background-color: #4CAF50;
  transition: width 0.3s ease;
}

function setProgress(percent) {
  const fill = document.getElementById("progressFill");
  fill.style.width = percent + "%";
}

class ProgressBar {
  constructor(elementId) {
    this.element = document.getElementById(elementId);
  }

  set(percent) {
    const value = Math.max(0, Math.min(100, percent));
    this.element.style.width = value + "%";
  }
}

// 使用方式
const bar = new ProgressBar("progressFill");
bar.set(75); // 设置为75%