当宽度改变时，进度点的位置没有正确对齐

Question

我们正在尝试显示连接了 7 点线的进度条。但是填充进度条线时进度条点没有正确对齐。

.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>

这是填充这样的东西，没有填充正确的位置，我们怎么能这样做。我们已经为我们的代码引用了。请添加一些建议，以便更改宽度不会影响线上点的位置。谢谢。

Answer 1

做不同的事情并考虑 background-clip 如下：

.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>

圈数固定：

.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>

当宽度改变时，进度点的位置没有正确对齐

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

html

css

progress-bar

css-shapes