vue-gradient-progress --------渐变色圆环进度条

在实际开发中可能会遇到这样的 UI 效果图:
在这里插入图片描述

带动画效果的渐变色圆环进度条,可以使用vue-gradient-progress插件来实现

安装依赖

  1. npm install vue-gradient-progress -S
    也可以使用 cnpm yarn
  2. main.js 引入:
	import GradientProgress from 'vue-gradient-progress'
	import "vue-gradient-progress/lib/gradient-progress.css"
	Vue.use(GradientProgress)

使用示例

<gradient-progress id="pId" :rate="80" /><gradient-progress id="pId" :rate="80">
...自定义内容
</gradient-progress>

参数

属性
描述
类型
默认值
idid,同一组件内多次使用,id要不同StringcanvasId
showRate是否显示rate值Booleantrue
raterateNumber0
lineWidth圆环边框宽度Number6
canvasWidthcanvas宽度Number300
canvasHeightcanvas高度Number150
ballR小球半径Number2.5
cirR圆环半径Number45
startColor渐变色开始颜色(rgb)Array[143, 211, 235]
endColor渐变色结束颜色(rgb)Array[88, 176, 168]

版权声明:本文为weixin_41838201原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。