1.0.3 • Published 4 years ago

gradient-ring-progress v1.0.3

Weekly downloads
1
License
MIT
Repository
github
Last release
4 years ago

gradient-ring-progress 渐变环形进度条

gradient-ring-progress是js编写的渐变环形进度条插件,该插件小巧不依赖其他的库

Demo

gradient-ring-progress

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,百分值, ...]
typecanvas实现方式(canvas, svg) 现在只有canvas
value0.75值, 0到1之间的数值
num300分段数,越大渐变越精细
roundtrue是否圆角
duration3000动画时长(需要大于分段数)
innerRadius50内圆半径
outerRadius60外圆半径
degree0开始角度
counterclockwisefalse是否为逆时针
bgColorrgba(238, 239, 243, 1)背景环颜色,不想要可设置为透明
fontColorrgba(58, 87, 168, 1)文字颜色
fontSize16文字大小
suffix%文字后缀
toFixed1小数位

Function

方法名参数含义
setValval修改进度条的数据
remove-删除节点

Example

image