css z-index divs below another div - html

Question

I'm simply trying to have a line connect a loading bar to a circle.
The line is not being displayed underneath the loading bar however. I've tried messing around with z-indexes and also putting them in containers. Any ideas?
https://jsfiddle.net/sfcurv4h/
body {
justify-content: center;
align-items: center;
background: #1e1e2f;
display: flex;
height: 100vh;
padding: 0;
margin: 0;
}
.progress {
background: rgba(255,255,255,0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
padding: 0 5px;
display: flex;
height: 40px;
width: 500px;
z-index: 1;
}
.progress-value {
animation: load 3s normal forwards;
border-radius: 100px;
background: #fff;
height: 30px;
width: 0;
z-index: 1;
}
#keyframes load {
0% { width: 0; }
100% { width: 68%; }
}
.active-services-circle {
width: 40px;
height: 40px;
background: #fff;
border: 2px solid #ACACA6;
border-radius: 50%;
transition: background 1s;
}
.active-services-circle.completed {
border: 2px solid #4B81BD;
background: #4B81BD;
}
.space-between-lb-features {
position: relative;
display: flex;
justify-content: space-between;
width: 600px;
}
.line-connector {
position: absolute;
width: 100%;
height: 50%;
border-bottom: 2px solid #ACACA6;
z-index: -1;
}
<div class="space-between-lb-features">
<div class="progress">
<div class="progress-value"></div>
</div>
<div class="active-services-circle"></div>
<div class="line-connector"></div>
</div>