vue插件 环形进度条动画效果
程序员文章站
2022-05-11 13:24:18
...
1:首先安装插件 cnpm install vue-circleprogressbar
<template>
<div class="wrap-progress">
<circle-progressbar
:id="1"
barColor="#0000ff"
backgroundColor="rgba(0,0,0,0.4)"
:width="100"
:radius="10"
:progress="progress"
:isAnimation="false"></circle-progressbar>
</div>
</template>
<script>
import circleProgressbar from 'vue-circleprogressbar';
export default {
//组件引用
components: {
circleProgressbar
},
data(){
return {
progress: 40,
}
}
}
</script>
说明:
id:String 选填 多次定义设置不同的值
width:Number 必填 设置圆整体的大小
radius:Number 必填 设置进度条的宽度
progress:Number 必填 设置进度百分比
barColor:String 必填 设置进度条颜色
backgroundColor:String 必填 设置进度条北京颜色
delay:Number 选填 延时多久执行 单位为ms
duration:Number 选填 动画整体时常 单位为ms
timeFunction:String 选填 动画缓动算法
isAnimation:Boolean 选填 是否以动画的方式呈现
下一篇: 笔记二:常用的h5语义化标签