使用css+react实现进度条
支持线状、半圆、整圆形式。
API
| api | 类型 | 是否必选 | 默认值 | 说明 |
|---|---|---|---|---|
| type | string | false | 'line' | 进度条不同形式，目前支持线状(line)、半圆(semicircle)、整圆(circle)形式 |
| percent | number | true | 0 | 进度百分比为0-100 |
| color | string | false | '#5584ff' | 进度区域显示的颜色 |
| backColor | string | false | '#ebecf0' | 无进度区域显示的颜色 |
| borderWidth | number | false | 6 | 进度条边框宽度 |
| radius | number | false | 100 | 在type为semicircle或circle形式下自定义圆的半径(包括边框的宽度),值要大于borderWidth。line形式想要控制宽度，直接在Progress外包裹一个自己期待的宽度的容器，Progress默认width为100% |
| text | reactNode | false | '' | 描述文本，整圆、半圆类型支持 |
示例
npm i react-css-progress
线状形式
<Progress type="line" percent={25} />
线状形式自定义颜色
<Progress type="line" percent={50} color="#52c41a" backColor="#eee" />
线状形式自定义边框宽度
<Progress type="line" percent={75} borderWidth={10} />
半圆形式
<Progress type="semicircle" percent={25} />
半圆形式自定义颜色
<Progress type="semicircle" percent={50} color="#52c41a" backColor="#eee" />
半圆形式自定义边框宽度
<Progress type="semicircle" percent={75} borderWidth={10} />
半圆形式自定义圆的半径
<Progress type="semicircle" percent={75} radius={60} />
半圆形式添加文案
<Progress type="semicircle" percent={75} radius={60} text={<div style={{ color: 'red' }}>text</div>} />
整圆形式
<Progress type="circle" percent={25} />
整圆形式自定义颜色
<Progress type="circle" percent={50} color="#52c41a" backColor="#eee" />
整圆形式自定义边框宽度
<Progress type="circle" percent={75} borderWidth={10} />
整圆形式自定义圆的半径
<Progress type="circle" percent={75} radius={60} />
整圆形式添加文案
<Progress type="circle" percent={75} text={<div style={{ color: 'red' }}>text</div>} />