问如何在进度条的末尾添加圆圈？

EN

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

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

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

<div style={containerStyles}>
  <div style={fillerStyles}></div>
  <span style={circleStyle}>{text}</span>
</div>

const circleStyle = {
  height: 40,
  width: 40,
  position: "absolute",
  right: 0,
  backgroundColor: bgcolor,
  borderRadius: "50%",
  top: -10,
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  color: "white"
};

position: "relative",