Sanyuelanv-circle NPM

sanyuelanv-circle-progress

安装

  npm install --save sanyuelanv-circle

使用

  import Circle from 'sanyuelanv-circle'

  <Circle
    current = {this.state.current}
    startPoint = {0}
    gradientDirection = {"horizontal"}
    gradient = {
      [
        {offset:0,color:"rgb(255,255,0)",opacity:1},
        {offset:50,color:"rgb(255,0,0)",opacity:1},
      ]
    }
  />

参见例子：demo文件夹

参数

所有参数使用props传递。

参数名字	值	说明	默认值
size	int	整个svg的宽高，因为是圆形所以只要一个值	200
strokeWidth	int	进度条的宽度	10
radius	int	进度条所在圆形的半径	95
progressColor	string	进度条激活的颜色	"#249fff"
bottomColor	string	进度条未激活的颜色	"#cccccc"
progressFillColor	string	进度条所在圆形激活的颜色	"transparent"
bottomFillColor	string	进度条所在圆形未激活的颜色	"transparent"
time	number	进度条发生变化动画用时	0.5
startPoint	number	进度条起始位置	0
gradientDirection	string	进度条渐变方向vertical,horizontal	vertical
gradient	object	进度条渐变配置	null
current	number	进度条当前进度（范围0-1）	无
showText	Boolean	是否显示文字	无
textStyle	object	文字样式(目前只能上下左右居中),type参数是文字显示形式。0:带百分比符号的整型数，1:不带百分比的两位小数，2：不带百分比的整型数	{size:12,color:"#555",type:0}
linecap	string	进度条两端的样式(round/square)	"square"