JS中上传进度提示

在上传图片的过程中，如果耗时较长，如果能够给用户一个进度的提示，会让用户体验更加良好。做了几个比较常见的上传进度提示的demo：

原理

这几个demo是在Vue框架中完成的，使用了axios发送http请求，原理和简单，都是获取上传进度值，控制视图状态，其他就是表现形式的不同。

关键点就是onprogress这个事件，它是XMLHttpRequest对象的一个回调函数，在上传或者下载过程中会周期性执行。接受一个参数event，event有两个参数：

• loaded：已经传输的数量
• total：要传输的总数量

示例如下：

var xmlhttp = new XMLHttpRequest(),
  method = 'GET',
  url = 'https://developer.mozilla.org/';

xmlhttp.open(method, url, true);
xmlhttp.onprogress = function (event) {
  //do something 
  const progressRatio = event.loaded / event.total
};
xmlhttp.send();

在axios中的配置选项中也提供了对应的接口：

{
 // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
   
    // 对原生进度事件的处理
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
   
    // 对原生进度事件的处理
  },
}

在对应的函数中我们不断修改progress值就可以实现上传进度在视图的体现。

使用<progress>和<meter>

上面前两种方案使用了HTML5的<progress>标签和<meter>标签，

<progress> 标签标示任务的进度（进程）。max规定要完成多少工作，value表示已经完成的进度：

<progress :value=progress max="100" class="meter"></progress>

<meter>标签定义已知范围或分数值内的标量测量，例如磁盘用量、查询结果的相关性，等等。实际上在W3C标准上有明确的标识：

<meter>标签不应用于指示进度（在进度条中）。如果标记进度条，请使用<progress>标签。

-_-||

利用CSS自己写

原理都是相同的，第三种用了一个半透明的遮罩层，随着上传进图不断完成，使用transform将遮罩层移走

圆环

圆环这个稍微麻烦一点，需要对border的知识进行一点回顾。

border实际上是一个的梯形，将上、右border上色，左、下border透明，再增加border-radius就出现了一个倾斜的半圆环

然后旋转-135°，让半圆环竖直放置，然后增加动画效果：

.test {
  margin-left: 50px;
  margin-top: 50px;
  width: 200px;
  height: 200px;
  border: 40px solid transparent;
  border-right-color: gray;
  border-top-color: forestgreen;
  border-radius: 50%;
  transform: rotate(-135deg);
  animation: test-run 4s linear infinite;
}

@keyframes test-run {
  0% {
    transform: rotate(-135deg);
  }

  50%, 100% {
    transform: rotate(45deg);
  }
}

这样半圆环就旋转起来了：

接下来要做的就是用一个和半圆环宽度相同，高度相同的<div>，将透明的另半部分半圆环切掉，再做出一个对称的左半个半圆环，就Ok了

可以添加一个背景圆环

<div class="outer">
  <div class="loader">
    <div