1.1.0 • Published 7 years ago
react-progressable v1.1.0
React-Progressable
A classic progressbar component for react. Lot to come yet...
Install
npm install --save react-progressableUsage
import React, {Component} from 'react';
import {ProgressBarClassic, ProgressCircleClassic} from "react-progressable";
class ProgressBarComponent extends Component {
render(){
<div>
<ProgressBarClassic fill={80} />
<ProgressCircleClassic fill={80} />
</div>
}
}
export default ProgressBarComponent;Progress-Bar Classic
Available Props:
| Prop Name | Prop Type | Default Value | Description |
|---|---|---|---|
| background | String | #eeeeee | Background color for un-filled area |
| fill | Number | 0 | Progress percentage. Max: 100 |
| fillColor | String | #ff9a00 | Background color for filled area |
| fillText | String | NULL | Progress-bar text to be appear in filled area |
| fillTextStyle | Object | {} | React style object for fillText |
| height | Number | 25 | Height of the progress-bar in px. |
| borderRadius | Number | 0 | Border radius in px. |
| animate | Boolean | true | Progress-bar animation toggle |
| animateDuration | Number | 1 | Progress-bar animation duration in seconds |
| stripes | Boolean | false | Stripe effect on progress-bar |
| stripesAnimate | Boolean | false | Animate stripe effect |
| stripesAnimateDirection | String | left | Animated stripe effect direction. 'right' or 'left' |
Progress-Circle Classic
Available Props:
| Prop Name | Prop Type | Default Value | Description |
|---|---|---|---|
| background | String | #eeeeee | Background color for un-filled area |
| fill | Number | 0 | Progress percentage. Max: 100 |
| fillColor | String | #ff9a00 | Background color for filled area |
| fillText | String | NULL | Progress-circle text to be appear in center |
| fillTextStyle | Object | {} | React style object for fillText |
| size | Number | 150 | Height and Width of the progress-circle. |
| ringWidth | Number | 7 | Width of the progress-circle filled area |