I have a progress bar that has three stages (begin, select, result). Once a stage is reached the progress circle becomes black to indicate and stages not achieved yet are transparent with a black border for the circle. The issue I am facing is that the line connecting the three progress bar circles is not responsive. On certain devices, the line doesn't touch the circles as it should and on other devices, the line goes over the circle which I don't want either. I would appreciate any help on making this progress bar responsive across devices, thank you!

https://jsfiddle.net/6p9kmte8/

HTML

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div >
  <div >
    <ul >
      <li >Begin</li>
      <li >Select</li>
      <li>Results</li>
    </ul>
  </div>
</div>

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>

CSS

.progress_bar>div {
    display: inline-block;
}

.progress-container {
    width: 71.3%;
    /*margin-top: 9.39%;*/
    margin-bottom: 1%;
    font-weight: 300;
    margin-right: 2em;
    position: fixed;
    bottom: 0;
}

.progress-steps {
    counter-reset: step;
}

.progress-steps li {
    list-style-type: none;
    width: 33.333333%;
    float: left;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    color: black;
}

.progress-steps li:before {
    width: 2.5em;
    height: 2.5em;
    content: counter(step);
    counter-increment: step;
    line-height: 2.5em;
    border: 2px solid black;
    display: block;
    text-align: center;
    margin: 0 auto .7em auto;
    border-radius: 50%;
    background-color: black;
}

.progress-steps li:after {
    width: 100%;
    height: 0.2em;
    content: '';
    position: absolute;
    background-color: black;
    top: 1.2em;
    left: -50%;
    z-index: -1;
}

.progress-steps li:first-child:after {
    content: none;
}

.progress-steps li.active {
    color: black;
}

.progress-steps li.active:before {
    border-color: black;
}

.progress-steps li.active li:after {
    background-color: black;
    width: 85%;
    margin-left: 7.5%;
}

.progress-steps li.active li:before {
    background-color: transparent;
    border: 2px solid black;
    color: transparent;
}

@media (max-width: 1024px) {
    .progress-container {
        width: 90%;
        /*margin-top: 7.15em;
        padding-bottom: 0.4em;*/
        margin-bottom: 2%;
    }

    .progress-steps li {
        font-size: 0.9em;
    }

    .progress-steps li.active li:after {
        width: 71%;
    }
}

CodePudding user response：

.progress_bar>div {
    display: inline-block;
}

.progress-container {
    width: 71.3%;
    /*margin-top: 9.39%;*/
    margin-bottom: 1%;
    font-weight: 300;
    margin-right: 2em;
    position: fixed;
    bottom: 0;
}

.progress-steps {
    counter-reset: step;
}

.progress-steps li {
    list-style-type: none;
    width: 33.333333%;
    float: left;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    color: black;
}

.progress-steps li:before {
    width: 2.5em;
    height: 2.5em;
    content: counter(step);
    counter-increment: step;
    line-height: 2.5em;
    border: 2px solid black;
    display: block;
    text-align: center;
    margin: 0 auto .7em auto;
    border-radius: 50%;
    background-color: black;
}

.progress-steps li:after {
    width: calc(100% - 2.5em);
    height: 0.2em;
    content: "";
    position: absolute;
    background-color: black;
    top: 1.25em;
    right: calc(50%   1.25em);
    z-index: -1;
}

.progress-steps li:first-child:after {
    content: none;
}

.progress-steps li.active {
    color: black;
}

.progress-steps li.active:before {
    border-color: black;
}

.progress-steps li.active li:before {
    background-color: transparent;
    border: 2px solid black;
    color: transparent;
}

@media (max-width: 1024px) {
    .progress-container {
        width: 90%;
        /*margin-top: 7.15em;
        padding-bottom: 0.4em;*/
        margin-bottom: 2%;
    }

    .progress-steps li {
        font-size: 0.9em;
    }
}