vue 圆形百分比进度条_vue 圆形进度条组件解析

项目简介

本组件是vue下的圆形进度条动画组件

自由可定制，几乎全部参数均可设置

源码简单清晰

面向人群

急于使用vue圆形进度条动画组件的同学。直接下载文件，拷贝代码即可运行。

喜欢看源码，希望了解组件背后原理的同学。

刚接触前端的同学也可以通过本文章养成看源码的习惯。打破对源码的恐惧，相信自己，其实看源码并没有想象中的那么困难

组件使用方法及参数解析

<circle-progress

:id="1"

:width="200"

:radius="20"

:progress="70"

:delay="200"

:duration="1000"

:barColor="#F2AE57"

:backgroundColor="#FFE8CC"

:isAnimation="true"

:timeFunction="cubic-bezier(0.99, 0.01, 0.22, 0.94)"

>

| 参数名 | 值类型 | 是否必填 | 参数作用 | 默认值 |

| :------: | :------: | :------: | :------: | :------: |

| id | String | 选填 | 组件的id，多次定义设置不同的值 | 1 |

| w