当前位置：首页 > VUE

vue实现进度圈效果

2026-01-21 22:20:40VUE

使用 SVG 和 CSS 动画实现进度圈

在 Vue 中实现进度圈效果可以通过 SVG 结合 CSS 动画或 JavaScript 动态计算完成。以下是两种常见方法：

方法一：基于 SVG 的环形进度条

通过 SVG 的 <circle> 元素绘制环形路径，利用 stroke-dasharray 和 stroke-dashoffset 控制进度：

<template>
  <div class="progress-circle">
    <svg width="100" height="100" viewBox="0 0 100 100">
      <!-- 背景圆 -->
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#eee"
        stroke-width="10"
      />
      <!-- 进度圆 -->
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#42b983"
        stroke-width="10"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="offset"
        transform="rotate(-90 50 50)"
      />
    </svg>
    <span>{{ progress }}%</span>
  </div>
</template>

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

<style>
.progress-circle {
  position: relative;
  display: inline-block;
}
.progress-circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}
</style>

方法二：使用第三方库（如 vue-progress-path）

对于更复杂的场景，可以集成专门库简化实现：

安装库：
```
npm install vue-progress-path
```

在组件中使用：


<template>
<progress-circle :progress="progress" :size="100" :thickness="10"/>
</template>

import { ProgressCircle } from 'vue-progress-path'; import 'vue-progress-path/dist/vue-progress-path.css';

export default { components: { ProgressCircle }, data() { return { progress: 75 } } };

```

方法三：动态过渡效果

通过 Vue 的过渡系统实现平滑动画：

vue实现进度圈效果

<template>
  <svg width="100" height="100">
    <circle ... />
    <circle
      :style="{ 
        'stroke-dashoffset': animatedOffset,
        transition: 'stroke-dashoffset 0.5s ease-out'
      }"
    />
  </svg>
</template>

<script>
export default {
  watch: {
    progress(newVal) {
      this.animatedOffset = this.circumference * (1 - newVal / 100);
    }
  }
};
</script>