DE
React - einen eigenen animierten Fortschrittsbalken erstellen
3
points
Hallo! 👋 😊
Heute will ich einen einfachen animierten Fortschrittsbalken zeigen, den ich vor kurzem in React erstellt habe.
Das Endergebnis dieses Beitrags:
Unten präsentiere ich meine Lösung für einen einfachen Fortschrittsbalken, sowie Beispielstile dafür 📊🎨.
In dieser Lösung verwende ich:
useState- Hook, um den Zustand des Fortschrittsbalken zu verwalten,width- die Breite des Fortschrittsbalkens, die in Abhängigkeit vom Container in Prozent gemessen wird - dieser Trick ermöglicht, den Fortschritt von 0% bis 100% einfach anzuzeigen,- Beispieltasten, die die Methode
setProgress()ausführen, um zu zeigen, wie der Fortschrittsbalken funktioniert (die Animation zwischen den Umschaltungen ergibt einen tollen Effekt).
Ein praktisches Beispiel:
// 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',
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);