React - animowany pasek postępu

// 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',

    transition: '0.3s'

};

​

const ProgressBar = ({progress}) => {

    const state = `${progress}%`;

    return (

      <div style={containerStyle}>

        <div style={{...contentStyle, width: state}}>

          {progress > 5 ? state : ''}

        </div>

      </div>

    );

};

​

const App = () => {

  const [progress, setProgress] = React.useState(25);

  return (

    <div>

      <ProgressBar progress={progress} />

      <br />

      <div>

        <button onClick={() => setProgress(0)}>0%</button>

        <button onClick={() => setProgress(5)}>5%</button>

        <button onClick={() => setProgress(15)}>15%</button>

        <button onClick={() => setProgress(50)}>50%</button>

        <button onClick={() => setProgress(75)}>75%</button>

        <button onClick={() => setProgress(100)}>100%</button>

      </div>

    </div>

  );

};

​

const root = document.querySelector('#root');

ReactDOM.render(<App />, root);