The position of progress dots are not aligning properly when width is changing

Question

We are trying to show progress bar with 7 dots line connected. But progress bar dots are not aligned properly when filling the progress bar line.

.progress-bar {
  position: relative;
  display: inline-block;
  height: 40px;
  width: 630px;
  background: linear-gradient(to right, #8fe4bf 99.9%, transparent 99.9%), radial-gradient(50px circle at 50%, #8fe4bf 10%, transparent 0%);
  background-position: 0% 50%, 50% 50%;
  background-size: 100% 3px, 80px 70px;
  /* 5px is the thickness of the bar, 50px is 1/8th of the height */
  background-repeat: no-repeat, repeat-x;
}

.progress-now {
  position: absolute;
  height: 100%;
  background: linear-gradient(to right, #00b164 99.9%, transparent 99.9%), radial-gradient(50px circle at 50% 50%, #00b164 10%, transparent 0%);
  background-position: 0% 50%, 50% 50%;
  background-size: 100% 3px, 80px 50px;
  background-repeat: no-repeat, repeat-x;
  z-index: 1;
  width: 60%;
}

<div class="progress-bar">
  <div class="progress-now" id="progress-now" role="progressnow">

  </div>
</div>


<div class="progress-container">
  <div class="progress-bar">
    <div class="progress-now" id="progress-now" role="progressnow">

    </div>
  </div>
</div>

This is filling some thing like this not filling in proper positions how can we do this. We have referred Progress bar made of solid line, with dots as steps for our code. Please add some suggestions so changing the width do not effect the position of dots on the line. Thank you.

Answer 1

Do it differently and consider background-clip like below:

.progress-bar {
  position: relative;
  height: 40px;
  background: 
    linear-gradient(#8fe4bf 0 0) center no-repeat, 
    radial-gradient(circle 5px, #8fe4bf 98%, transparent);
  background-size: 100% 3px, 80px 100%;
}

.progress-bar::before {
  content:"";
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  /* for simplicity I am using the same background 
   and applying a filter to get a different coloration */
  background: inherit;
  filter:brightness(0.7);
  padding-right:calc(100% - var(--p,20%));  /* this will control the progress*/
  background-clip:content-box; /* this will do the magic by clipping the background*/
}

<div class="progress-bar"></div>
<div class="progress-bar" style="--p:50%"></div>
<div class="progress-bar" style="--p:80%"></div>
<div class="progress-bar" style="--p:100%"></div>

To have fixed number of circles:

.progress-bar {
  position: relative;
  height: 40px;
  background: 
    linear-gradient(#8fe4bf 0 0) center no-repeat, 
    radial-gradient(circle 5px, #8fe4bf 98%, transparent);
  background-size: 100% 3px, calc(100%/var(--n,5)) 100%;
}

.progress-bar::before {
  content:"";
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  /* for simplicity I am using the same background 
   and applying a filter to get a different coloration */
  background: inherit;
  filter:brightness(0.7);
  padding-right:calc(100% - var(--p,20%));  /* this will control the progress*/
  background-clip:content-box; /* this will do the magic by clipping the background*/
}

<div class="progress-bar"></div>
<div class="progress-bar" style="--p:50%;--n:10"></div>
<div class="progress-bar" style="--p:80%;--n:3"></div>
<div class="progress-bar" style="--p:100%;--n:8"></div>