实现简易进度条经常我们在网上下载文件的时候，一到 99% 就会卡得很久不动，还会以为是我们网络的问题其实，我们在网上看

经常我们在网上下载文件的时候，一到 99% 就会卡得很久不动，还会以为是我们网络的问题

其实，我们在网上看到的进度条可能不一定是真的实际下载进度，只是对实际进度的一个模拟

因为如果要进行实际的进度计算，我们要从后台通过网络请求去获取到实际包大小，传输中再进行实时的计算，等到实际获取传输完毕渲染后再计算完成，其中就会非常的损耗性能并且加大了代码的复杂度

我们实际可以利用进度条元素，进行下载的模拟，然后通过一些时间逻辑控制来显示进度，最后再根据是否下载完成达到 100%

首先先写实现一个简易的进度条:

HTML

<progress id="file" max="100" value="0"></progress>
<p>下载进度<span id="current">0</span>%</p>

let file = document.querySelector("#file");
let current = document.querySelector("#current");

setInterval(() => {
  let num = file.value += 1;
  current.innerText = num;
}, 500)

会实现类似以下的效果：