术上没太大难度,有难度的地方是怎么让整个动画比较流畅。一个主要问题是动画的滞后性:当下载进度到某个点的时候,你再用250ms的动画过渡过去,这个时候已经慢了,所以很多人可能因为这个原因或者嫌麻烦,直接就不做动画了,在进度事件触发的时候直接更新进度条相应的位置,不过我们可以尝试实现一下。 最后做出来的效果如下图所示: 小狗奔跑的动画是一个lottie动画,来自 codepen 。 1. 获取下载进度 ajax里面可以拿到下载进度,如下代码所示: let xhr = new XMLHttpRequest(); const downloadUrl = 'installer.dmg'; x