Skip to content

shane935/progress

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

34 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rc-progress


progress ui component for react

NPM version SPM version build status Test coverage gemnasium deps node version npm download

Screenshots

Feature

  • support ie9+,chrome,firefox,safari

Keyboard

install

rc-progress

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.
strokeLinecap String round The shape to be used at the end of the progress bar, can be square or round.

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

http://localhost:8000/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8000/tests/runner.html?coverage

License

rc-progress is released under the MIT license.

About

React Progress Bar

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 99.9%
  • HTML 0.1%