EN
React - custom progress bar
4 points
In this short article we would like to show how to create own progress bar in React.
Note: check this article to know how to create animated progress bar.
Practical example:
xxxxxxxxxx1
// import React from 'react';2
// import ReactDOM from 'react-dom';3
4
const containerStyle = {5
border: '1px solid silver',6
background: '#ededed'7
};8
9
const contentStyle = {10
background: '#00cc00',11
height: '24px',12
textAlign: 'center',13
lineHeight: '24px',14
fontFAmily: 'sans-serif'15
};16
17
const ProgressBar = ({progress}) => {18
const state = `${progress}%`;19
return (20
<div style={containerStyle}>21
<div style={{contentStyle, width: state}}>22
{progress > 5 ? state : ''}23
</div>24
</div>25
);26
};27
28
const App = () => {29
return (30
<div>31
<ProgressBar progress={0} />32
<br />33
<ProgressBar progress={5} />34
<br />35
<ProgressBar progress={20} />36
<br />37
<ProgressBar progress={50} />38
<br />39
<ProgressBar progress={75} />40
<br />41
<ProgressBar progress={100} />42
</div>43
);44
};45
46
const root = document.querySelector('#root');47
ReactDOM.render(<App />, root);
