将文本添加到工具条进度条

<div class="progress-bar">
  <div class="progress" id="progress"></div>
  <div class="progress-text" id="progress-text">0%</div>
</div>

.progress-bar {
  width: 100%;
  background-color: #f3f3f3;
  border: 1px solid #bbb;
  border-radius: 5px;
  height: 20px;
}

.progress {
  width: 0%;
  background-color: #4CAF50;
  height: 100%;
  border-radius: 5px;
}

.progress-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

function updateProgress(percent) {
  var progress = document.getElementById("progress");
  var progressText = document.getElementById("progress-text");
  progress.style.width = percent + "%";
  progressText.innerHTML = percent + "%";
}

// 示例：模拟进度条加载
var progress = 0;
var interval = setInterval(function() {
  progress += 10;
  if (progress > 100) {
    clearInterval(interval);
  }
  updateProgress(progress);
}, 500);