react-percentage-circle

React Percentage Circle

Usage no npm install needed!

<script type="module">
  import reactPercentageCircle from 'https://cdn.skypack.dev/react-percentage-circle';
</script>

README

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.

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.