环形进度条-带加载动画(Vue3+TS)

组件定义: CircleProgress.vue

<!-- 
 
  该组件,主要是解决环形进度条,可以实现动画加载的效果,
  如果没有动画效果,建议使用: https://element-plus.gitee.io/zh-CN/component/progress.html
 -->
<template>
  <div class="progress" :style="{ width, height }">
    <svg viewBox="0 0 96 96" class="svg-circle-progress" style="width: 96px; height: 96px">
      <circle
        r="40"
        cx="48"
        cy="48"
        fill="none"
        stroke-miterlimit="20"
        stroke-width="10"
        class="svg-progress"
        style="stroke-dasharray: 275, 279.602; stroke: #eee"
      ></circle>
      <circle
        r="40"
        cx="48"
        cy="48"
        fill="none"
        stroke-miterlimit="20"
        stroke-width="10"
        class="svg-progress"
        :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`"
      ></circle>
    </svg>
    <div class="mask">
      <span class="bigData"> {{ showProgress }} </span> %
    </div>
  </div></template
>
<script setup lang="ts">
  import { ref, toRefs, watch, onMounted } from 'vue';

  const props = defineProps({
    targetValue: {
      type: Number,
      require: true,
      default: -1,
    },
    color: {
      type: String,
      default: '#4c7cee',
    },
    width: {
      type: String,
      default: '210px',
    },
    height: {
      type: String,
      default: '100px',
    },
  });
  const { height, width, color, targetValue } = toRefs(props);

  const showProgress = ref<number>(0);
  const addData = () => {
  	if(targetValue.value === 0) return;
    let timer = setInterval(() => {
      if (targetValue.value === showProgress.value) {
        clearInterval(timer), timer == null;
        return;
      }
      ++showProgress.value;
    }, 15);
  };
  onMounted(() => {
    addData();
  });
  const progressValue = ref<number>((showProgress.value / 100) * 250);

  watch(showProgress, (newValue: number) => {
    progressValue.value = (newValue / 100) * 250;
  });
</script>
<style lang="less" scoped>
  .progress {
    display: inline-block;
    position: relative;
    height: 100px;
    text-align: center;
  }
  .svg-circle-progress {
    position: relative;
    transform: rotate(-90deg);
  }
  .svg-progress {
    stroke: #2196f3;
    stroke-linecap: round;
    transition: all 0.3s linear;
  }
  .mask {
    position: absolute;
    top: 50%;
    left: 23%;
    transform: translate(-50%, -50%);
    .bigData {
      font-size: 30px;
      font-weight: 500;
      color: #232323;
      margin-right: -5px;
    }
  }
</style>

使用:

<template>
  // other code....
  
 <div class="" style="margin: 50px 0">
	 <CircleProgress :target-value="progress1" />
	 <CircleProgress :target-value="progress2" />
	 <CircleProgress :target-value="progress3" />
 </div>
        
 // other code....
</template>

<script setup lang="ts">
 import CircleProgress from './CircleProgress.vue';

 // 数值需来源于后端接口
 const progress1 = 87;
 const progress2 = 45;
 const progress3 = 6;
	
</script>