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} />

Props

Name	Description
percentage	Numeric percentage to display, from 0-100. Required.
strokeWidth	Width of circular line. Default: 8.
className	Classes to apply to the svg element
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.

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.