欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 选填 是否以动画的方式呈现

相关标签: vue.js