如何使用JS或Jquery创建动态进度条？

<div id="progressBarContainer">
  <div id="progressBar"></div>
</div>

#progressBarContainer {
  width: 100%;
  background-color: #ddd;
}

#progressBar {
  width: 0%;
  height: 30px;
  background-color: #4CAF50;
  text-align: center;
  line-height: 30px;
  color: white;
}

function updateProgressBar(percentage) {
  document.getElementById('progressBar').style.width = percentage + '%';
  document.getElementById('progressBar').innerHTML = percentage + '%';
}

// 模拟进度更新
let progress = 0;
setInterval(() => {
  if (progress <= 100) {
    updateProgressBar(progress);
    progress++;
  } else {
    clearInterval();
  }
}, 50);

function updateProgressBar(percentage) {
  $('#progressBar').css('width', percentage + '%').html(percentage + '%');
}

// 模拟进度更新
let progress = 0;
setInterval(() => {
  if (progress <= 100) {
    updateProgressBar(progress);
    progress++;
  } else {
    clearInterval();
  }
}, 50);