Simple circular progress meters for React.js, rendered in SVG.
npm install --save react-progress-arc
Basic usage:
import React from 'react';
import ReactDOM from 'react-dom';
import ProgressArc from 'react-progress-arc';
const container = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(container);
ReactDOM.render(<ProgressArc completed={0.5} />, container);
The following properties can be set to customise the arcs through React:
completed
- Set this to a value between 0 and 1. You probably want this bound tothis.state.something
.stroke
- Progress meter colour, default#444
.diameter
- External diameter, width and height of the arc, default50
.background
- Colour of the background circle, defaulttransparent
.strokeWidth
- Thickness of the arc drawn, default5
.
MIT