-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.jsx
46 lines (41 loc) · 1.04 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import React, { PropTypes } from 'react';
import classNames from 'classnames';
import styles from './ProgressBar.styl';
const ProgressBar = ({
className,
incrementName,
current,
total,
}) => {
const complete = current - 1;
const widthPct = (100 / total) * complete;
return (
<div className={classNames(className, styles.barContainer)}>
<span className={styles.label}>
{incrementName} {current} of {total}
</span>
<div
className={classNames(styles.bar, {
// Add a class to apply smooth transitions after the first step
[styles.inProgress]: complete > 0,
})}
style={{
width: `${widthPct}%`,
}}
/>
</div>
);
};
ProgressBar.propTypes = {
className: PropTypes.string,
// e.g. "Step" or "Image"
incrementName: PropTypes.string.isRequired,
// "current" starts at 1
current: PropTypes.number.isRequired,
// Total item count
total: PropTypes.number.isRequired,
};
ProgressBar.defaultProps = {
className: '',
};
export default ProgressBar;