import { useState } from "react";

function App() {
  const [progress, setProgress] = useState(0);
  const [progressDirection, setProgressDirection] = useState("asc");

  function increment() {
    if (progress === 100) {
      setProgressDirection("desc");
      setProgress(80);
    } else {
      setProgress((currentProgress) => currentProgress + 20);
    }
  }
  function decrement() {
    if (progress === 0) {
      setProgressDirection("asc");
      setProgress(20);
    } else {
      setProgress((currentProgress) => currentProgress - 20);
    }
  }
  function handleClick() {
    if (progressDirection === "desc") {
      decrement();
    } else {
      increment();
    }
  }
  return <div className="App">
    <div>{progress}</div>
    <button onClick={handleClick}>Click</button>
  </div>;
}

export default App;

You can do this by manipulating its width as

Live Demo

App.js

import React, { useState } from 'react';

const App = () => {
    const [isIncrementing, setIsIncrementing] = useState( true );
    const [initialWidth, setInitialWidth] = useState( 20 );

    const changeWidth = () => {
        if ( isIncrementing ) setInitialWidth(oldWidth => oldWidth + 20);
        else setInitialWidth(oldWidth => oldWidth - 20);
        if(isIncrementing && initialWidth + 20 === 100) setIsIncrementing(false);
        if(!isIncrementing && initialWidth - 20 === 0) setIsIncrementing(true);
    }

    return (
        <div>
            <div className="progress-bar-wrapper" onClick={changeWidth}>
                <div className="progress-bar" style={{ width: `${initialWidth}%` }}></div>
            </div>
        </div>
    );
};

export default App;

CSS

.progress-bar-wrapper{
    width: 300px;
    height: 1rem;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 1rem;
}

.progress-bar{
    background-color: blueviolet;
    border-radius: 1rem;
    height: 100%;
    transition: width ease-out 0.3s;
}