用单词而不是数字来创建一个百分比预加载器？

<div class="preloader">
  <div class="progress-bar">
    <div class="progress"></div>
  </div>
  <div class="percentage">0%</div>
</div>

.preloader {
  width: 200px;
  height: 20px;
  border: 1px solid #ccc;
  position: relative;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #00aaff;
  position: absolute;
}

.percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 假设加载的总量为100
var total = 100;
// 假设已加载的量为50
var loaded = 50;

// 更新加载进度
function updateProgress() {
  var progress = (loaded / total) * 100;
  document.querySelector('.progress-bar').style.width = progress + '%';
  document.querySelector('.percentage').textContent = Math.round(progress) + '%';
}

// 调用更新加载进度函数
updateProgress();