A circular progress indicator component with support for multiple bars
npm install react-circular-multi-progressbarThis is a fork of Kevin Qi's react-circular-progressbar that adds support for multiple bars within a single progressbar ring.
``js`
A circular progress indicator component, built with SVG. Easily customizable with CSS. See a live demo.
Install the npm module:
`bash`
npm install react-circular-progressbar
Important: you'll also need to copy src/styles.css into your repo to use the default styling!
Import the component:
`javascript`
import CircularProgressbar from 'react-circular-progressbar';
..and use the component in your JSX:
`javascript`
For more in-depth examples, take a look at the demo code to see JSX for the live demo page.
| 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 mapping to override classNames of each svg element (root, trail, path, text, background). Enables styling with react-jss. See this PR for more detail. |
Use plain CSS to customize the styling - the default CSS is a good starting point, but you can modify 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.:
`css`
.CircularProgressbar-path { stroke: red; }
.CircularProgressbar-trail { stroke: gray; }
.CircularProgressbar-text { fill: yellow; }
.CircularProgressbar-background { fill: green; }
#### 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.:
`javascript`
`css`
.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:
* Rotating progressbar
* Making the progressbar a gradient
* Putting progressbar around an image
* Customizing the background
To run demo locally on localhost:8080:
`bash`
yarn install
yarn start
Keep tests passing by running yarn test and yarn run lint`.