UNPKG

5.56 kBMarkdownView Raw
1# rc-progress
2
3Progress Bar.
4
5[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
6
7[npm-image]: http://img.shields.io/npm/v/rc-progress.svg?style=flat-square
8[npm-url]: http://npmjs.org/package/rc-progress
9[github-actions-image]: https://github.com/react-component/progress/workflows/CI/badge.svg
10[github-actions-url]: https://github.com/react-component/progress/actions
11[circleci-image]: https://img.shields.io/circleci/react-component/progress/master?style=flat-square
12[circleci-url]: https://circleci.com/gh/react-component/progress
13[coveralls-image]: https://img.shields.io/coveralls/react-component/progress.svg?style=flat-square
14[coveralls-url]: https://coveralls.io/r/react-component/progress?branch=master
15[david-url]: https://david-dm.org/react-component/progress
16[david-image]: https://david-dm.org/react-component/progress/status.svg?style=flat-square
17[david-dev-url]: https://david-dm.org/react-component/progress?type=dev
18[david-dev-image]: https://david-dm.org/react-component/progress/dev-status.svg?style=flat-square
19[download-image]: https://img.shields.io/npm/dm/rc-progress.svg?style=flat-square
20[download-url]: https://npmjs.org/package/rc-progress
21[bundlephobia-url]: https://bundlephobia.com/result?p=rc-progress
22[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-progress
23
24## Example
25
26https://progress.react-component.vercel.app/
27
28## Screenshots
29
30<img src="https://t.alipayobjects.com/images/T12p8gXjpgXXXXXXXX.gif" />
31
32## Browsers
33
34* support IE9+, Chrome, Firefox, Safari
35
36## Install
37
38[![rc-progress](https://nodei.co/npm/rc-progress.png)](https://npmjs.org/package/rc-progress)
39
40## Usage
41
42```js
43import { Line, Circle } from 'rc-progress';
44
45export default () => (
46 <>
47 <Line percent={10} strokeWidth={4} strokeColor="#D3D3D3" />
48 <Circle percent={10} strokeWidth={4} strokeColor="#D3D3D3" />
49 </>
50);
51```
52
53## Compatibility
54
55| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
56| --- | --- | --- | --- | --- |
57| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
58
59## API
60
61### props
62
63<table class="table table-bordered table-striped">
64 <thead>
65 <tr>
66 <th style="width: 100px;">name</th>
67 <th style="width: 50px;">type</th>
68 <th style="width: 50px;">default</th>
69 <th>description</th>
70 </tr>
71 </thead>
72 <tbody>
73 <tr>
74 <td>strokeWidth</td>
75 <td>Number</td>
76 <td>1</td>
77 <td>Width of the stroke. Unit is percentage of SVG canvas size.</td>
78 </tr>
79 <tr>
80 <td>strokeColor</td>
81 <td>String</td>
82 <td>#2db7f5</td>
83 <td>Stroke color.</td>
84 </tr>
85 <tr>
86 <td>trailWidth</td>
87 <td>Number</td>
88 <td>1</td>
89 <td>Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth is not defined, it is the same as strokeWidth.</td>
90 </tr>
91 <tr>
92 <td>trailColor</td>
93 <td>String</td>
94 <td>#D9D9D9</td>
95 <td>Color for lighter trail stroke underneath the actual progress path.</td>
96 </tr>
97 <tr>
98 <td>strokeLinecap</td>
99 <td>String</td>
100 <td>'round'</td>
101 <td>The shape to be used at the end of the progress bar: can be `butt`, `square` or `round`.</td>
102 </tr>
103 <tr>
104 <td>prefixCls</td>
105 <td>String</td>
106 <td>rc-progress</td>
107 <td>prefix className for component</td>
108 </tr>
109 <tr>
110 <td>className</td>
111 <td>String</td>
112 <td></td>
113 <td>customized className</td>
114 </tr>
115 <tr>
116 <td>style</td>
117 <td>Object</td>
118 <td></td>
119 <td>style object will be added to svg element</td>
120 </tr>
121 <tr>
122 <td>percent</td>
123 <td>Number | Number[]</td>
124 <td>0</td>
125 <td>the percent of the progress</td>
126 </tr>
127 <tr>
128 <td>gapDegree</td>
129 <td>Number</td>
130 <td>0</td>
131 <td>the gap degree of half circle, 0 - 360</td>
132 </tr>
133 <tr>
134 <td>gapPosition</td>
135 <td>String</td>
136 <td>top</td>
137 <td>the gap position: can be `top`, `bottom`, `left`, or `right`. </td>
138 </tr>
139 </tbody>
140</table>
141
142## Installation
143
144```
145npm install --save rc-progress
146```
147
148## Development
149
150```
151npm install
152npm start
153```
154
155## License
156
157rc-progress is released under the MIT license.