Progress
0%
25%
50%
75%
100%
Multiple bars
import React from 'react';
import { Progress } from 'reactstrap';
const Example = (props) => {
return (
<div>
<div className="text-center">0%</div>
<Progress />
<div className="text-center">25%</div>
<Progress value="25" />
<div className="text-center">50%</div>
<Progress value={50} />
<div className="text-center">75%</div>
<Progress value={75} />
<div className="text-center">100%</div>
<Progress value="100" />
<div className="text-center">Multiple bars</div>
<Progress multi>
<Progress bar value="15" />
<Progress bar color="success" value="30" />
<Progress bar color="info" value="25" />
<Progress bar color="warning" value="20" />
<Progress bar color="danger" value="5" />
</Progress>
</div>
);
};
export default Example;
Properties
Progress.propTypes = {
multi: PropTypes.bool,
bar: PropTypes.bool, // used in combination with multi
tag: PropTypes.string,
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
min: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
]),
max: PropTypes.oneOf([
PropTypes.string,
PropTypes.number,
]),
animated: PropTypes.bool,
striped: PropTypes.bool,
color: PropTypes.string,
className: PropTypes.string,
barStyle: PropTypes.object, // used to add style to the inner progress-bar element
barClassName: PropTypes.string, // used to add class to the inner progress-bar element
barAriaValueText: PropTypes.string,
barAriaLabelledBy: PropTypes.string,
};
Progress.defaultProps = {
tag: 'progress',
value: 0,
max: 100,
};
Color Variants
import React from 'react';
import { Progress } from 'reactstrap';
const Example = (props) => {
return (
<div>
<Progress value={2 * 5} />
<Progress color="success" value="25" />
<Progress color="info" value={50} />
<Progress color="warning" value={75} />
<Progress color="danger" value="100" />
</div>
);
};
export default Example;
Labels
import React from 'react';
import { Progress } from 'reactstrap';
const Example = (props) => {
return (
<div>
<Progress value="25">25%</Progress>
<Progress value={50}>1/2</Progress>
<Progress value={75}>You're almost there!</Progress>
<Progress color="success" value="100">You did it!</Progress>
<Progress multi>
<Progress bar value="15">Meh</Progress>
<Progress bar color="success" value="30">Wow!</Progress>
<Progress bar color="info" value="25">Cool</Progress>
<Progress bar color="warning" value="20">20%</Progress>
<Progress bar color="danger" value="5">!!</Progress>
</Progress>
</div>
);
};
export default Example;
Striped
import React from 'react';
import { Progress } from 'reactstrap';
const Example = (props) => {
return (
<div>
<Progress striped value={2 * 5} />
<Progress striped color="success" value="25" />
<Progress striped color="info" value={50} />
<Progress striped color="warning" value={75} />
<Progress striped color="danger" value="100" />
<Progress multi>
<Progress striped bar value="10" />
<Progress striped bar color="success" value="30" />
<Progress striped bar color="warning" value="20" />
<Progress striped bar color="danger" value="20" />
</Progress>
</div>
);
};
export default Example;
Animated
The animated prop also adds the striped prop; there is no need to pass both.
import React from 'react';
import { Progress } from 'reactstrap';
const Example = (props) => {
return (
<div>
<Progress animated value={2 * 5} />
<Progress animated color="success" value="25" />
<Progress animated color="info" value={50} />
<Progress animated color="warning" value={75} />
<Progress animated color="danger" value="100" />
<Progress multi>
<Progress animated bar value="10" />
<Progress animated bar color="success" value="30" />
<Progress animated bar color="warning" value="20" />
<Progress animated bar color="danger" value="20" />
</Progress>
</div>
);
};
export default Example;
Multiple bars / Stacked
Plain
With Labels
Stripes and Animations
Stripes
Animated Stripes
Plain
import React from 'react';
import { Progress } from 'reactstrap';
const Example = (props) => {
return (
<div>
<div className="text-center">Plain</div>
<Progress multi>
<Progress bar value="15" />
<Progress bar color="success" value="20" />
<Progress bar color="info" value="25" />
<Progress bar color="warning" value="20" />
<Progress bar color="danger" value="15" />
</Progress>
<div className="text-center">With Labels</div>
<Progress multi>
<Progress bar value="15">Meh</Progress>
<Progress bar color="success" value="35">Wow!</Progress>
<Progress bar color="warning" value="25">25%</Progress>
<Progress bar color="danger" value="25">LOOK OUT!!</Progress>
</Progress>
<div className="text-center">Stripes and Animations</div>
<Progress multi>
<Progress bar striped value="15">Stripes</Progress>
<Progress bar animated color="success" value="30">Animated Stripes</Progress>
<Progress bar color="info" value="25">Plain</Progress>
</Progress>
</div>
);
};
export default Example;
Max value
1 of 5
50 of 135
75 of 111
463 of 500
Various (40) of 55
import React from 'react';
import { Progress } from 'reactstrap';
const Example = (props) => {
return (
<div>
<div className="text-center">1 of 5</div>
<Progress value="1" max="5" />
<div className="text-center">50 of 135</div>
<Progress value={50} max="135" />
<div className="text-center">75 of 111</div>
<Progress value={75} max={111} />
<div className="text-center">463 of 500</div>
<Progress value="463" max={500} />
<div className="text-center">Various (40) of 55</div>
<Progress multi>
<Progress bar value="5" max={55}>5</Progress>
<Progress bar color="success" value="15" max={55}>15</Progress>
<Progress bar color="warning" value="10" max={55}>10</Progress>
<Progress bar color="danger" value="10" max={55}>10</Progress>
</Progress>
</div>
);
};
export default Example;
