React wrapper for progressbar.js
npm install react-progress-bar.js
Responsive and slick progress bars for React. Line, Circle and SemiCircle shaped
progress bars are provided and their animations are highly customizable.
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
Demos These 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+.
#### How to install
Install the library using npm:
```
npm install --save react-progress-bar.js
Since React users are anyways using a CommonJS module loader, this module is published
only in NPM.
#### Loading module
CommonJS
`javascript`
var ProgressBar = require('react-progress-bar.js')
var Circle = 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 , replace it with, simple. Shape is the internal base object for all
progress bars.
* 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.
`css`
#container {
width: 300px;
height: 150px;
}
Line, Circle or SemiCircle shaped progress bar. Appends SVG to container.
Example
`js
var App = React.createClass({
render: function render() {
var options = {
strokeWidth: 2
};
// For demo purposes so the container has some dimensions.
// Otherwise progress bar won't be shown
var containerStyle = {
width: '200px',
height: '200px'
};
return (
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:
Prop | Description
-------------------|------------------------
progress | Progress from 0 to 1. E.g. 67% progress would equal 0.67. Default 0.null
text | Value for progress bar's text. Default .true
options | Options for path drawing. See progressbar.js documentation.
initialAnimate | If , progress bar is animated to given progress when mounted. Default false.{}
containerStyle | Styles for progress bar container. Default ..progressbar-container`.
containerClassName | Class name for progress bar container. Default