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


Change progress bar component to:

  <div style={containerStyles}>
      <div style={fillerStyles}>
        <div style={circleStyles}>{circleText}</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">

Edit objective-cherry-2ytzm