JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

React

function App(props) {
  const [width, setWidth] = useState(0);

  useEffect(() => {
    let interval;
    if (width < 100) {
      interval = setInterval(() => {
        setWidth((prevWidth) => prevWidth + 1);
      }, 50);
    } else {
      clearInterval(interval);
    }

    return () => {
      clearInterval(interval);
    };
  }, [width]);

  const progressBarStyle = {
    width: `${width}%`
  };

  return (
    <div className="App">
      <h1>Progress Bar</h1>
      <div className="progress-container">
        <div className="progress-bar" style={progressBarStyle}>
          {width}%
        </div>
      </div>
      <button onClick={() => setWidth(0)}>Reset Progress</button>
    </div>
  );
}