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:
// ONLINE-RUNNER:browser;
// import React from 'react';
// import ReactDOM from 'react-dom';
const containerStyle = {
border: '1px solid silver',
background: '#ededed'
};
const contentStyle = {
background: '#00cc00',
height: '24px',
textAlign: 'center',
lineHeight: '24px',
fontFAmily: 'sans-serif'
};
const ProgressBar = ({progress}) => {
const state = `${progress}%`;
return (
<div style={containerStyle}>
<div style={{...contentStyle, width: state}}>
{progress > 5 ? state : ''}
</div>
</div>
);
};
const App = () => {
return (
<div>
<ProgressBar progress={0} />
<br />
<ProgressBar progress={5} />
<br />
<ProgressBar progress={20} />
<br />
<ProgressBar progress={50} />
<br />
<ProgressBar progress={75} />
<br />
<ProgressBar progress={100} />
</div>
);
};
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);