Html progess栏与文本颜色的变化

Question

我的进度条有问题。此刻我的代码如下：

.progress-bar-green2 {
  background: #70af28;
}

.progress-bar,
.progress {
  position: relative;
  overflow: hidden;
}

.progress-bar .bar,
.progress .bar {
  position: initial;
  top: 0;
  height: 100%;
  overflow: hidden;
  /*position: absolute;*/
  left: 0;
  right: 0;
}

.progress-bar .bar span,
.progress .bar span {
  /*display: block;*/
  /*width: 400px;*/
  height: 100%;
  text-align: center;
  z-index: 50;
}

.progress-bar .bar.positive,
.progress .bar.positive {
  background: #70af28;
  left: 0;
  width: 54%;
  -webkit-animation: animate-positive 4s;
  animation: animate-positive 4s;
}

.progress-bar .bar.positive span,
.progress .bar.positive span {
  position: absolute;
  left: 0;
  color: #fff;
  left: 0;
  right: 0;
  z-index: 99;
}

.progress-bar .bar.negative,
.progress .bar.negative {
  background: none;
  left: 0;
  right: 0;
  /*width: 46%;*/
  -webkit-animation: animate-negative 4s;
  animation: animate-negative 4s;
  position: absolute;
  /*width: 100%;*/
  z-index: 5;
  color: #70af28;
  text-align: center;
}

.progress-bar .bar.negative span,
.progress .bar.negative span {
  /*right: 0;*/
  color: #70af28;
  left: unset;
  right: unset;
  position: unset;
  z-index: 100;
}

@-webkit-keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@keyframes animate-positive {
  0% {
    width: 0%;
  }
}

@-webkit-keyframes animate-negative {
  0% {
    width: 100%;
  }
}

@keyframes animate-negative {
  0% {
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.5/umd/popper-utils.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>


<div class="progress rl-progress border-section">
  <div class="progress-bar progress-bar-green progress-bar-green2" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="bar positive">
    <span>0:30 </span>
  </div>
  <div class="bar negative">
    <span>0:30</span>
  </div>
</div>

我的问题是文本中的z-index重叠，不幸的是，进度条的宽度必须为100％。有什么方法可以解决这个问题吗？最后的效果非常简单，我希望，当进度进展到文本时，文本会变为白色。