[Edit]

React - animierter Fortschrittsbalken

1 contributors

2 contributions

0 discussions

3 points

Created by:

Nikki

10520

In diesem kurzen Artikel wird gezeigt, wie man einen animierten Fortschrittsbalken in React ertstellen kann.

Schnelle Lösung:

xxxxxxxxxx
 
// 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);