html js做的进度条

效果图

代码

<div id="progress-bar">
  <div id="progress-slot"></div>
</div>

<script>
  let time = 0
  /** 开始 */
  function start() {
    const dom = document.getElementById('progress-slot');
    let width = 0
    time = setInterval(() => {
      width = width + speed(1)
       if (width > 99 ) {
        clearInterval(time)
      } else {
       console.log(dom.style.width)
       dom.style.width = width + "%"
      }
    }, 150);
  }

  function speed(t) {
    return Math.random()*t*10
  }

  /** 结束 */
  function end() {
    clearInterval(time)
    const dom = document.getElementById('progress-slot');
    dom.style.width = '100%';
  }

  start();

  /** 模拟网络延迟 */
  setTimeout(() => {
    end()
  }, 6000);


</script>

<style>
  #progress-bar {
    height: 10px;
    width: 100%;
    background: gainsboro;
  }

  #progress-slot {
    transition: all 0.5s;
    background: red;
    height: 100%;
  }
</style>