How to build progress bar with circle at the end of bar?

I need to build horizontal progress bar with circle at the end in react js, as shown in picture. I am able to build progress bar with custom “%”, now I want to add circle at the end with some text inside.

progress bar with circle

code for progress bar with custom “%”: codesandbox

Answer

Change progress bar component to:

  <div style={containerStyles}>
      <div style={fillerStyles}>
        <div style={circleStyles}>{circleText}</div>
      </div>
    </div>

And add this styles to the component:

  const circleStyles = {
    display: "flex",
    position: "absolute",
    right: "0",
    width: "50px",
    height: "50px",
    background: "blue",
    top: "-60%",
    borderRadius: "50px",
    justifyContent: "center",
    alignItems: "center",
    color: "white"
  };

And here’s the App.js:

export default function App() {
  return (
    <div className="App">
      <ProgressBar
        bgcolor={item.bgcolor}
        completed={item.completed}
        circleText={"100%"}
      />
    </div>
  );
}

Edit objective-cherry-2ytzm