在反应进度栏中，如何使地图标记遵循填充百分比？

Question

我正在尝试在reactjs中建立进度条。虽然，我几乎可以使所有工作正常，但我无法弄清楚如何使地图标记遵循进度条。现在，它一直一直坐在左侧。是否可以使进度条遵循进度条？

父组件：

<div className="col-md-10">
  <div className={styles['progress']}>
    <ProgressBar className={styles['progress-bar']} percentage={this.state.percentage} />
    <h2 className={styles.currentMoney}>${money_earned}</h2>
  </div>
</div>

进度栏：

const ProgressBar = (props) => {
  return (
      <div className={styles['progress-bar']}>
        <Filler percentage={props.percentage} />
        <div className={styles.map} style={{ width: `${props.percentage}%` }}>
                    <div class={`${styles['progress-value']}`}></div>
        </div>
      </div>
    )
}

填充器：

const Filler = (props) => {
  return(
        <div className={styles.filler} style={{ width: `${props.percentage}%` }}>
            <span className={styles.offCircle}></span>
            <div class={`${styles['progress-value']}`}></div>
        </div>
  )
}

CSS：

.test_progress-bar {
  position: relative;
  height: 20px;
  border-radius: 50px;
  border: 1px solid #333;
}

.filler {
  background: #f6ba2b;
  height: 100%;
  border-radius: inherit;
  transition: width .2s ease-in;
}
.map {
  content: "\F3C5";
  font-family: "Font Awesome 5 Free";
}
.progress-bar .map {
  content: "\F3C5";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  /*position: absolute;
  top: -88px;
  right: -10px;*/
  font-size: 25px;
  font-weight: 700;
  color: #000;
}
.progress-bar .map:before, 
    .progress-bar .map:after
    {
      position: absolute;
    color: #707070;
    top: 0;
    width: 50px;
    height: 50px;
    /* background: #fff; */
    margin-top: -44.5px;
    /* border-radius: 36px; */
    /* border: 2px solid #707070; */
    text-shadow: 0 0 0px black;
    line-height: 47px;
    text-align: center;
    font-size: 19px;
    }
    .progress-bar .map:before{
      content: "\F3C5";

      color: #444;
    }



.row,.progress{ position: relative;width: 100%; margin-top: 40px;margin-bottom: 55px;}
    .progress-bar{position:relative;background: #fff;height: 30px; border-radius:36px; border: 1px solid black;}
    .progress-bar > .filler .offCircle{
      position:absolute;width:100%;
      height:100%;
      /* background:red; */
    }

    .progress:after,
    .progress-bar:before,
    .progress-bar:after,
    .progress-bar > .filler .offCircle:before, 
    .progress-bar > .filler .offCircle:after
    {
      position: absolute;
      color: #707070;
      top: 0;
      width: 50px;
      height: 50px;
      background: #fff;
      margin-top: -11.5px;
      border-radius: 36px;
      border: 2px solid #707070;
      text-shadow: 0 0 0px black;
      line-height: 47px;
      text-align: center;
      font-size: 19px;
    }
    .progress-bar > .filler .offCircle:before{
      content: '$\A $100';
      left:3.67%;
      color: #444;
    }

    .progress-bar > .filler .offCircle:after{

      content: '$\A $500';
      left:15.33%;
      color: #444;
    }
    .progress-bar:before{
      content: '$$\A $1000';
      left:26.67%;
      color: #444;
    }
    .progress-bar:after{
      content: '$$\A $2500';
      left:46.76%;
      color: #444;
    }
    .progress:after{
      content: '$$\A $5000';
      left:70.33%;
      color: #444;
    }


.progress .progress-value{
  width: 50px;
  height: 25px;
  font-size: 16px;
  font-weight: 600;
  color: #f4bc25;
  line-height: 25px;
  border-radius: 4px;
  position: absolute;
  top: -113px;
  right: -23px;
  letter-spacing: 1px;
}