如何使用html、css和javascript编写带有空格进度条

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

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

function updateProgressBar() {
  var progressBar = document.getElementById("progress-bar");
  var width = 1;
  var interval = setInterval(frame, 10); // 每10毫秒更新一次进度条宽度

  function frame() {
    if (width >= 100) {
      clearInterval(interval); // 达到满进度时停止定时器
    } else {
      width++;
      progressBar.style.width = width + "%";
    }
  }
}

<button onclick="updateProgressBar()">开始进度</button>