Progress Bar.
https://progress.react-component.vercel.app/
- support IE9+, Chrome, Firefox, Safari
import { Line, Circle } from 'rc-progress';
export default () => (
<>
<Line percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
<Circle percent="10" strokeWidth="4" strokeColor="#D3D3D3" />
</>
); IE / Edge |
 Firefox |
 Chrome |
 Safari |
 Electron |
|---|---|---|---|---|
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
| name | type | default | description |
|---|---|---|---|
| strokeWidth | Number | 1 | Width of the stroke. Unit is percentage of SVG canvas size. |
| strokeColor | String | #2db7f5 | Stroke color. |
| trailWidth | Number | 1 | Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth are not defined, it same as strokeWidth. |
| trailColor | String | #D9D9D9 | Color for lighter trail stroke underneath the actual progress path. |
| strokeLinecap | String | 'round' | The shape to be used at the end of the progress bar, can be `butt`, `square` or `round`. |
| prefixCls | String | rc-progress | prefix className for component |
| className | String | customized className | |
| style | Object | style object will be added to svg element | |
| percent | Number | Number[] | 0 | the percent of the progress |
| gapDegree | Number | 0 | the gap degree of half circle, 0 - 360 |
| gapPosition | String | top | the gap position, value: top, bottom, left, right. |
npm install --save rc-progress
npm install
npm start
rc-progress is released under the MIT license.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent