In the midst of creating a 3-stage progress bar using only CSS. The current design is displayed below:
#progBar {
background-color:#bdbdbd;
padding:1.5vw;
position:relative;
height:9vw;
}
.progcapt {
background-color: #526cfd;
color: transparent;
text-shadow: 0px 2px 3px #526cfd;
-webkit-background-clip:text;
font-family:'arial black';
font-size:3vw;
}
#cOne {
position:absolute;
left:calc(50% - 2.5vw);
top:calc(50% - 2.5vw);
border-radius:5vw;
height:5vw;
width:5vw;
border:1px solid #526cfd;
text-align:center;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0px 0px 3vw #526cfd;
background-color:white;
}
#cOne::before {
position:absolute;
width:50vw;
height:1vw;
background-color:rgba(82,108,253,0.5);
content:'';
}
#cOneRing {
position:absolute;
top:-calc(0.5vw + 1px);
left:-calc(0.5vw + 1px);
width:6vw;
height:6vw;
border:1px solid #526cfd;
border-radius:6vw;
}
<div id='progBar'>
<div id='cOne'>
<span class='progcapt'>1</span>
<div id='cOneRing'> </div>
</div>
</div>
The purpose behind this design:
- Three discs, each representing a step
- The central disc serves as an "anchor"
- An annular border is created for each disc by absolutely positioning it and nesting the annulus inside
- A pseudo-element (::before) is used to create a track for the progress bar on the anchor
- All components (circles and track) are placed within a relatively positioned rectangular bar acting as the background
The problem faced involves attempting to move the track behind its parent disc element using z-index="-1". Unfortunately, this causes it to vanish completely. It's apparent that I'm missing something crucial, but unable to pinpoint the issue. Hopefully, someone can help identify the error.