rc-progress
progress ui component for react
Screenshots
Feature
- support ie9+,chrome,firefox,safari
Keyboard
install
Usage
var Line = require('rc-progress').Line;
var Circle = require('rc-progress').Circle;
var React = require('react');
React.render(<div>
<Line percent=“10” strokeWidth="4" strokeColor=“#D3D3D3” />
<Circle percent=“10” strokeWidth="4" strokeColor=“#D3D3D3” />
</div>, container);
API
props
name | type | default | description |
---|---|---|---|
strokeWidth | Number | 1 | Width of the stroke. Unit is percentage of SVG canvas size. |
strokeColor | String | #3FC7FA | 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. |
Development
npm install
npm start
Example
http://localhost:8000/examples/
online example: http://react-component.github.io/progress/
Test Case
http://localhost:8000/tests/runner.html?coverage
Coverage
License
rc-progress is released under the MIT license.