1.0.3 • Published 5 years ago
gradient-ring-progress v1.0.3
gradient-ring-progress 渐变环形进度条
gradient-ring-progress是js编写的渐变环形进度条插件,该插件小巧不依赖其他的库
Demo
Install
npm i gradient-ring-progress -SQuick 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
