gradient-ring-progress 渐变环形进度条 gradient-ring-progress是js编写的渐变环形进度条插件，该插件小巧不依赖其他的库 Demo 点这个看看呗 点这个试试呗 Install npm i gradient-ring-progress -S Quick Start <div id="progress" style="height: 500px; width: 500px;"></div> import Progress from 'gradient-ring-progress' const progress = new Progress({ dom: document.getElementById('progress') }) progress.init() Options 参数 默认值 含义 dom - [必填]进度条的父级元素 color [['rgba(238, 73, 41, 1)', 0], ['rgba(149, 236, 105, 1)', .5], ['rgba(86, 179, 255, 1)', 1]] 颜色值[[颜色1,百分值], ...] type canvas 实现方式(canvas, svg) 现在只有canvas value 0.75 值, 0到1之间的数值 num 300 分段数,越大渐变越精细 round true 是否圆角 duration 3000 动画时长(需要大于分段数) innerRadius 50 内圆半径 outerRadius 60 外圆半径 degree 0 开始角度 counterclockwise false 是否为逆时针 bgColor rgba(238, 239, 243, 1) 背景环颜色,不想要可设置为透明 fontColor rgba(58, 87, 168, 1) 文字颜色 fontSize 16 文字大小 suffix % 文字后缀 toFixed 1 小数位 Function 方法名 参数 含义 setVal val 修改进度条的数据 remove - 删除节点 Example
