vue.js 圆形进度条

<template>
  <svg width="100" height="100">
    <circle
      cx="50"
      cy="50"
      r="45"
      stroke-width="10"
      fill="none"
      :stroke-dasharray="circumference + ' ' + circumference"
      :stroke-dashoffset="strokeDashoffset"
      :style="{ transition: 'stroke-dashoffset 0.5s' }"
    />
  </svg>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
      validator: value => value >= 0 && value <= 100
    }
  },
  computed: {
    radius() {
      return 45;
    },
    circumference() {
      return 2 * Math.PI * this.radius;
    },
    strokeDashoffset() {
      return this.circumference - (this.progress / 100) * this.circumference;
    }
  }
};
</script>

<style>
circle {
  stroke: #4caf50;
}
</style>