Skip to content

cweise/react-circular-progressbar

 
 

Repository files navigation

React Circular Progressbar

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

npm version Build Status

react-circular-progressbar animated gif

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 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.

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.

Packages

No packages published

Languages

  • JavaScript 90.9%
  • CSS 9.1%