基于vue项目，svg画圆形进度条，移动端、PC都能用

原创

于 2021-08-20 15:34:04 发布 · 557 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #css3 #vue.js

该博客详细介绍了如何使用Vue编写一个名为zCircle的组件，该组件用于创建带有进度动画的圆形进度条。组件接受多个属性如文字、文字大小、颜色、圆环直径、进度条宽度、当前进度和动画速度，并根据这些属性动态计算和展示进度环。通过SVG绘制圆环并利用CSS动画实现平滑的进度变化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<span class="zCircle" :style="`width:${circleSize}px;height:${circleSize}px;`">
		<svg>
			<circle 
				:cx="size" 
				:cy="size" 
				:r="size" 
				:stroke="layerColor" 
				:stroke-width="`${strokeWidth}px`" 
				:style="`transform: translate(${circleTranslate}px, ${circleTranslate}px);stroke-dasharray: 10000;stroke-dashoffset:0;`"
			></circle>
			<circle 
				v-if="circleLength > 0"
				:cx="size" 
				:cy="size"