linear progress bar built using ReactJS
npm install react-linear-progressbarjavascript
npm i react-linear-progressbar --save
`Usage
`javascript
import React, Component from 'react';
import Progressbar from 'react-linear-progressbar';export default function MyComponent (props) {
const myConfig = {
containerStyle :{},
progressStyle:{},
stripe: false,
animate: false,
showLabel: true,
width: 40,
label: 40 + '%'
}
return ;
}
`
Options
all the below configuration options (settings) should be passed as props in the form of an object named 'config' as shown in the example above.1. containerStyle : either a css className or an object of styles. This indicates the styles for progress bar container
* Examples
1. passing a css classname
`javascript
.sampleStyle {
background-color: #000 !important;
}
myConfig = {
containerStyle : 'sampleStyle'
.....
}
`
2. passing an object of styles
`javascript
const sampleStyle = {
'backgroundColor': '#000 !important';
}
myConfig = {
containerStyle : sampleStyle
.....
}
``
2. progressStyle : similar to containerStyle property above, progressStyle is also either a css className or an object of styles. This indicates the styles for the progress bar (for example, color of the progress)
3. stripe : a boolean to specify the progress should have stripes
* possible values: true | false ; false by default
4. animate : a boolean to indicate if the the progress bar should have animation effect
* possible values: true | false ; false by default
5. showLabel : a boolean to indicate if the the progress bar percentage should be shown
* possible values: true | false ; true by default
6. width : a number which denotes the progress percentage
* possible values: any number >=0 && <=100
7. label : a string value which will display on the progress bar
* possible values: any string ; width + '%' by default