如何编写包含图片和文本的进度循环？

<div id="progress-container">
  <p id="progress-text"></p>
  <img id="progress-image" src="loading.gif" alt="Loading">
</div>

#progress-container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
}

#progress-text {
  font-size: 16px;
  color: #333333;
  text-align: center;
  margin-top: 80px;
}

#progress-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
}

var progress = 0;
var progressText = document.getElementById("progress-text");
var progressImage = document.getElementById("progress-image");

function updateProgress() {
  progress++;
  if (progress > 100) {
    progress = 0;
  }
  progressText.innerHTML = "Progress: " + progress + "%";
  progressImage.src = getImageByProgress(progress);  // 根据进度获取不同的图片
}

setInterval(updateProgress, 100);  // 每100毫秒更新一次进度