React Circular Progressbar

A circular progress indicator component, built with SVG. Easily customizable with CSS. See a live demo.

Installation

Install the npm module:

npm install react-circular-progressbar

Include the default styles into your CSS by copying src/styles.css into your repo.

Usage

Import the component:

import CircularProgressbar from 'react-circular-progressbar';

..and use the component in your JSX:

<CircularProgressbar percentage={60} />

See the live demo page for examples and configuration options.

Development

To run demo locally on localhost:8080:

npm install
npm start

Keep CI tests passing by running npm test and npm run lint often.

Deploy updates to the demo page with npm run deploy:demo.