blob: 9bac847aebb30eeef0b8d7e1bcca95696d87c9f1 (
plain)
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
47
48
49
50
51
52
53
54
55
|
import { FC } from 'react';
import styles from './progress-bar.module.scss';
export type ProgressBarProps = {
/**
* Accessible progress bar name.
*/
'aria-label'?: string;
/**
* Current value.
*/
current: number;
/**
* Additional information to display before progress bar.
*/
info?: string;
/**
* Minimal value.
*/
min: number;
/**
* Maximal value.
*/
max: number;
};
/**
* ProgressBar component
*
* Render a progress bar.
*/
const ProgressBar: FC<ProgressBarProps> = ({
current,
info,
min,
max,
...props
}) => {
return (
<div className={styles.progress}>
{info && <div className={styles.progress__info}>{info}</div>}
<progress
className={styles.progress__bar}
max={max}
value={current}
aria-valuemin={min}
aria-valuemax={max}
aria-valuenow={current}
{...props}
></progress>
</div>
);
};
export default ProgressBar;
|
