A circular progress indicator component, built with SVG. Easily customizable with CSS. See a live demo.
Install the npm module:
npm install react-circular-progressbar
Include the default styles into your CSS by copying src/styles.css into your repo.
Import the component:
import CircularProgressbar from 'react-circular-progressbar';
..and use the component in your JSX:
<CircularProgressbar percentage={60} />
Name | Description |
---|---|
percentage |
Numeric percentage to display, from 0-100. Required. |
strokeWidth |
Width of circlar line. Default: false . |
initialAnimation |
Toggle whether to animate progress starting from 0% on initial mount. Default: false . |
classForPercentage |
Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: (percent) => percent < 100 ? 'incomplete' : 'complete' . |
textForPercentage |
Function which returns text to display, can be configured based on percentage. Example: (pct) => `${pct}%` . |
See the demo page JSX to see code used on the live demo page.
To run demo locally on localhost:8080:
npm install
npm start
Keep CI tests passing by running npm test
and npm run lint
often.