VUE2 环形进度条（百分比动态加载）

在Vue 2中创建一个环形进度条组件，可以使用以下步骤：

1. 定义组件模板。
2. 使用CSS绘制环形进度条的外观。
3. 使用Vue的响应式属性来动态更新进度条的百分比。

以下是一个简单的环形进度条组件示例：

<template>
  <div class="progress-ring" :style="{ transform: `scale(${size})` }">
    <svg :width="radius" :height="radius" viewBox="0 0 100 100">
      <circle class="progress-ring__circle"
              cx="50"
              cy="50"
              :r="innerRadius"
              :stroke-width="thickness"
              stroke="grey"
              fill="transparent" />
      <circle class="progress-ring__circle"
              cx="50"
              cy="50"
              :r="innerRadius"
              :stroke-width="thickness"
              stroke="blue"
              stroke-linecap="round"
              fill="transparent"
              :style="{ strokeDasharray: circumference + ' ' + circumference,
                        strokeDashoffset: circumference * (1 - (percentage / 100)),
                      }" />
    </svg>
    <div class="progress-ring__text">{{ percentage.toFixed(0) }}%</div>
  </div>
</template>
 
<script>
export default {
  props: {
    size: {
      type: Number,
      default: 1
    },
    radius: {
      type: Number,
      default: 100
    },
    thickness: {
      type: Number,
      default: 8
    },
    percentage: {
      type: Number,
      required: true,
      validator: value => value >= 0 && value <= 100
    }
  },
  computed: {
    innerRadius() {
      return this.radius / (2 * this.size) - this.thickness / 2;
    },
    circumference() {
      return 2 * Math.PI * this.innerRadius;
    }
  }
};
</script>
 
<style scoped>
.progress-ring {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
 
.progress-ring__circle {
  transform-origin: center;
  transition: all 0.2s ease-in-out;
}
 
.progress-ring__text {
  position: absolute;
  text-align: center;
  line-height: 100px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
}
</style>

在这个组件中，size 控制环形进度条的大小，radius 控制圆的半径，thickness 控制环形的厚度，percentage 是要显示的百分比。计算属性 innerRadius 和 circumference 被用于计算内圆半径和圆周长。

要使用这个组件，可以在父组件中这样使用：

<template>
  <div>
    <progress-ring :percentage="50" />
  </div>
</template>
 
<script>
import ProgressRing from './Progr