javascript - 建立一个将步数与仪表对齐的进度表

我正在创建一个进度表，该进度表包含4个步骤：

完成率分别为25％，50％，75％和100％。

目标是让组件通过percentComplete，然后让组件呈现进度表，其中条的宽度表示完成百分比，并根据完成百分比是否与25％，50％，75％和100％阈值匹配来激活步骤气泡。



以上是我最终希望看到的结果，如果我们将〜80％的内容传递给该组件。目前，这是75％的呈现效果，这是不希望的。它应该是：



这是我当前的代码：

.container {
  position: relative;
  width: 288px;
  padding: 12px 0;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}
.container:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 12px;
    background: #E6E6E7;
    margin-top: -6px;
    border-radius: 50px;
}
.container:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: blue;
    margin-top: -2px;
    width: 75%;
    border-radius: 50px;
    transition: width .2s ease;
}

.step {
  position: relative;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
}

.step:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ececec;
}

.p25:after,
.p50:after,
.p75:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: blue;
  border-radius: 50%;
}

<div class="container">
  <div class="step p25"></div>
  <div class="step p50"></div>
  <div class="step p75"></div>
  <div class="step 100p"></div>
</div>

如果您使用此代码段，则会注意到更改了

.container:after {
 width: ___%;
}

不能按需渲染。

关于如何通过简单地传递一个百分比就可以使该ui组件呈现所需的任何建议？

最佳答案

由于您是从25％（而不是零）开始，因此您需要从-25%开始并添加。您还需要考虑台阶的宽度。

width: calc(-25% + xx% + (24px * yy));

xx是所需的百分比
yy是步进偏移

.container {
  position: relative;
  width: 288px;
  padding: 12px 0;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.container:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 12px;
  background: #E6E6E7;
  margin-top: -6px;
  border-radius: 50px;
}

.container:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: blue;
  margin-top: -2px;
  width: calc(-25% + 50% + (24px * 1));
  border-radius: 50px;
  transition: width .2s ease;
  box-sizing: border-box;
}

.step {
  position: relative;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
}

.step:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ececec;
}

.p25:after,
.p50:after,
.p75:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background: blue;
  border-radius: 50%;
}

<div class="container">
  <div class="step p25"></div>
  <div class="step p50"></div>
  <div class="step p75"></div>
  <div class="step 100p"></div>
</div>