SOURCE

<div class='box'>
  <div class="progress">
  </div>
</div>
<script>
  function map(v, start1, stop1, start2, stop2) {
    return (v - start1) / (stop1 - start1) * (stop2 - start2) + start2;
  }
  
  const qs = s => document.querySelector(s) 
  const l = console.log

  async function main() {
    let loaded  = 0; // 初始化文件大小
    let total = 1000; // 总文件大小
    
    let progress = qs('.progress')
    let progressBoxWidth = qs('.box').clientWidth
    
    let p;

    p = setInterval(() => {

      if (loaded >= total) {
        l('叮！！！')
        return clearInterval(p) 
      };

      loaded += 10 // 
      let percentage = (loaded * 100) / total // 获取百分比
      
      progress.style.transform = `scaleX(${
        map(percentage, 0, 100, 0, progressBoxWidth) * 2
      })`  // 把百分比 映射为 进度条实际的宽度

    },
    1000 / 60)
  }

  main()
</script>

.box {
  margin: 40px;
  position: relative;
  display: inline-block;
  width: 300px;
  height: 10px;
  border: 1px solid rgba(0, 0, 0, .2);
  overflow: hidden;
}

.box > .progress {
  position: absolute;
  display: inline-block;
  height: 10px;
  background-color: red;
  width: 1px;
}