进度条_如何实现一个下载进度条/播放进度条

技术上没太大难度，有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性：当下载进度到某个点的时候，你再用250ms的动画过渡过去，这个时候已经慢了，所以很多人可能因为这个原因或者嫌麻烦，直接就不做动画了，在进度事件触发的时候直接更新进度条相应的位置，不过我们可以尝试实现一下。

最后做出来的效果如下图所示：小狗奔跑的动画是一个lottie动画，来自codepen。

1. 获取下载进度

ajax里面可以拿到下载进度，如下代码所示：

let xhr = new XMLHttpRequest();
  const downloadUrl = 'installer.dmg';
  xhr.open('GET', downloadUrl, true);
  xhr.addEventListener('progress', function (event) {
    
    // 响应头要有Content-Length
    if (event.lengthComputable) {
    
      let percentComplete = event.loaded / event.total;
      console.log(percentComplete); // 最后输出1
    }
  }, false);
  xhr.send();

前提是响应头里面有Content-Length这个字段告知当前文件的总字节数，如下图所示：