实现方式：首先是用svg画两个圆，同圆心同半径的两个圆，然后把颜色都设置成透明，利用圆的边框来实现。给两个圆设置相同的边框宽度，并且设置颜色（设置一个透明，一个有颜色）；然后创建stroke-dasharray实线/虚线线条，长度（值）为 2πr，即圆的周长；将stroke-dashoffset设置为动态属性，这个属性是“定义实线/虚线的起点距离 路径 的起点的距离”，利用这个属性来当做进度条，从而控制进度。

<template>
  <div id="pro">
    <button style="display:block;margin:0 auto" :disabled="disabled" @click="begin">开始</button>
    <!-- 内置图形：
      rect(矩形)    
      circle(圆)  
      ellipse(椭圆)   
      line(直线)   
      polyline(折线)  
      polygon(多边形)  
      path(路径)
    -->
    <!-- 内置样式
      fill(填充颜色)   
      fill-opacity(填充透明度)
      stroke(边框颜色)   
      stroke-width(边框宽度)   
      stroke-opacity(边框透明度)   
      stroke-dasharray(定义实线虚线的长度)
      stroke-dashoffset(定义实线/虚线的起点距离 路径 的起点的距离)
      transform(变换)
      filter(滤镜)(url[#滤镜id)]
    -->
    <svg style="width:300px;height:300px">
      <!-- r代表圆的半径；cx、cy代表圆心坐标；fill代表填充颜色，这里是透明 -->
      <circle r="50" cx="100" cy="100" fill="transparent" class="bg" />
      <circle
        r="50"
        cx="100"
        cy="100"
        fill="transparent"
        class="inner"
        stroke-dasharray="314"
        :stroke-dashoffset="progress"
      />
      <!-- 上面 stroke-dasharray="314"  314是圆的周长，2πr = 2 x 3.14 x 50 -->
      <!-- 定义了实线长度为314，stroke-dashoffset可以通过动态绑定来控制 -->
    </svg>
  </div>
</template>

<script>
export default {
  name: "Progress",

  data() {
    return {
      progress: 0,
      disabled: false, // 按钮是否禁用
      timer: null,
    };
  },
  
  methods: {
    begin() {
      this.disabled = true;
      // 定时器的回调函数用箭头函数来写，这样里面的this才会指向vue组件
      // 如果使用普通函数写法，那么this会指向 window
      this.timer = setInterval(() => {
        if (this.progress >= 314) {
          this.progress = 0;
          this.disabled = false;
          clearInterval(this.timer);
        } else {
          this.progress++;
        }
      }, 20);
    },
  },
};
</script>

body {
  margin: 0;
  padding: 0;
}

#pro { /* 容器 */
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

.bg {
  stroke-width: 8px; /* 设置边框宽度 */
  stroke: red; /* 设置边框颜色 */
}

.inner {
  stroke-width: 8px; /* 设置边框宽度 */
  stroke: blue; /* 设置边框颜色 */
}

实现的效果（把蓝色改成透明色即可）：