import CircularProgressbar from 'react-circular-progressbar';

// If you have a CSS loader configured, you can import the stylesheet.
// Otherwise, you can copy this CSS file into your project.
import 'react-circular-progressbar/dist/styles.css';

..and use the component in your JSX:

<CircularProgressbar percentage={60} />

For more in-depth examples, take a look at the demo code to see JSX for the live demo page.

Props

Name	Description
`percentage`	Numeric percentage to display, from 0-100. Required.
`className`	Classes to apply to the svg element
`strokeWidth`	Width of circular line as a percentage relative to total width of component. Default: `8`.
`background`	Whether to display background color. Default: `false`.
`backgroundPadding`	Padding between background and edge of svg as a percentage relative to total width of component. Default: `0`.
`initialAnimation`	Toggle whether to animate progress starting from 0% on initial mount. Default: `false`.
`counterClockwise`	Toggle whether to rotate progressbar in counterclockwise direction. 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}%` .
`classes`	Object allowing overrides of classNames of each svg subcomponent (root, trail, path, text, background). Enables styling with react-jss. See this PR for more detail.
`styles`	Object allowing customization of styles of each svg subcomponent (root, trail, path, text, background).

Customizing styles

Use plain CSS to customize the styling - the default CSS is a good starting point, but you can override it as needed.

CSS hooks

There are CSS hooks for the path, trail, text, and background of the progressbar which you can customize, e.g.:

.CircularProgressbar-path       { stroke: red; }
.CircularProgressbar-trail      { stroke: gray; }
.CircularProgressbar-text       { fill: yellow; }
.CircularProgressbar-background { fill: green; }

Inline style hooks

There are hooks to customize the inline styles of subcomponents of the progressbar (root, path, trail, text, and background). For example, to make the path colored dynamically based on percentage:

<CircularProgressbar
  percentage={yourPercentage}
  styles={{
    path: { stroke: `rgba(62, 152, 199, ${yourPercentage / 100})` },
  }}
/>

Using multiple themes

You can use the className prop to add different classes to the top-level SVG element, and then use that to add different themes to different instances, e.g.:

<CircularProgressbar percentage={25} className="progressbar-red" />
<CircularProgressbar percentage={25} className="progressbar-blue" />

.progressbar-red .CircularProgressbar-path { stroke: red; }
.progressbar-blue .CircularProgressbar-path { stroke: blue; }

Advanced usage

A lot of use cases can be covered with CSS. A few examples:

Development

To run demo locally on localhost:8080:

yarn install
yarn start

Keep tests passing by running yarn test and yarn run lint.