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" |

启动例子

  npm install
  npm run demo