进度条/圆环需求分析与css实现

业务需求

从服务端拉取数据（如生成商品海报）的时候，一些情况下需要以圆环的形式展示进度，提升用户的等待体验。

需求分析

1. 客户端发起ajax请求，且无法获取真实的进度。因此需要与服务端沟通确认生成海报请求大概所需的时间，如5s。
2. 在发起请求时就开始显示进度圆环，在5s内达到95%（可自定义，须小于100%）,因为此时有可能还未获取到请求结果数据。
   • 定义目标进度值为95
   • 可用定时器setTimeout实现+1，时间间隔为：Math.ceil(5000/95),每次+1前检查进度是否到达目标进度值，达到后清空定时器timer。如未达到，就继续循环定时+1。
3. 请求返回结果，需尽快（如200ms）更新进度条至100%。此时前面的进度条有两种状况：
   • 前面的进度已到达95%, timer已清空，此时需重新创建定时器setTimeout实现+1,在200ms内达到100%;
   • 前面进度未达到95%，timer仍在运行，此时可选择清空定时器，重新再创建定时器setTimeout实现+1。或者 更新目标进度值为100%，时间间隔更新为Math.ceil(200/100-currentProgressVal)