React-Progressable

A classic progressbar component for react. Lot to come yet...

Install

npm install --save react-progressable

Usage

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