This module is a React wrapper for progressbar.js. That's why most of the documentation refers to the original documentation.

Shortcuts

• How to install
• API documentation
• DemosThese demos use the original progressbar.js but the options are exactly the same for react-progressbar.js too

react-progressbar.js is lightweight, MIT licensed and supports all major browsers including IE9+.

Install the library using npm:

npm install --save react-progressbar.js 

Since React users are anyways using a CommonJS module loader, this module is published only in NPM.

CommonJS

varProgressBar=require('react-progressbar.js')varCircle=ProgressBar.Circle;

See https://github.com/kimmobrunfeldt/progressbar.js#how-it-works.

NOTE: Line, Circle and SemiCircle all point to the same documentation which is named Shape. You almost certainly should replace it(Shape) with Line, Circle or SemiCircle.

Example: if documentation states <Shape />, replace it with <Circle />, simple. Shape is the internal base object for all progress bars.

ProgressBar

• Line
• Circle
• SemiCircle

Important: make sure that your container has same aspect ratio as the SVG canvas. For example: if you are using SemiCircle, set e.g.

#container{width:300px; height:150px}

Line, Circle or SemiCircle shaped progress bar. Appends SVG to container.

Example

varApp=React.createClass({render: functionrender(){varoptions={strokeWidth: 2};// For demo purposes so the container has some dimensions.// Otherwise progress bar won't be shownvarcontainerStyle={width: '200px',height: '200px'};return(<Circleprogress={this.state.progress}text={'test'}options={options}initialAnimate={true}containerStyle={containerStyle}containerClassName={'.progressbar'}/>);}});

With Line shape, you can control the width of the line by specifying e.g. height: 5px with CSS.

Props:

See documentation for contributors.