Html progess bar with text color change - html

Question

I have problem with my progress bar. At this moment I have code like this:
.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>
My problem is that the z-index in text overlaps, unfortunately the progress bar must have a width of 100%. Are there any methods to solve this problem? The final effect is very simple, I would like that, when the progress progresses to the text, the text changed to white.