如何使用按钮停止进度条while循环？

<button id="stopButton">停止</button>
<div id="progressBar"></div>

#progressBar {
  width: 0%;
  height: 20px;
  background-color: blue;
}

var progressBar = document.getElementById("progressBar");
var stopButton = document.getElementById("stopButton");
var width = 0;
var intervalId;

function startProgress() {
  intervalId = setInterval(increaseWidth, 100);
}

function increaseWidth() {
  if (width >= 100) {
    clearInterval(intervalId);
  } else {
    width++;
    progressBar.style.width = width + "%";
  }
}

function stopProgress() {
  clearInterval(intervalId);
}

stopButton.addEventListener("click", stopProgress);