react+css实现进度条
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>} />
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
