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

Question

我正在努力创建一个包含四个步骤的进度表：

25％，50％，75％和100％完成率。

目标是让组件通过percentComplete，然后让组件呈现进度表，其中条的宽度表示完成百分比，并根据完成百分比是否匹配25、50、75和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组件呈现为所需的任何建议？

Answer 1

由于您要从25％（而不是零）开始，因此您需要从public class Date { int dd; public Date() { this(30); } public Date(int dd) { this(6,2018); this.dd=dd; } public static void main(String arg[]) { Date ob= new Date(); } } 开始并添加。您还需要考虑台阶的宽度。

-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%;
}

Answer 2

您可以尝试这种方法，在JS中可以控制轨道的宽度值。

.track{
  position: absolute;
  top: 21px;
  height: 4px;
  background-color: blue;
}

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

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

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

<div class="container">
  <div class="track" style="width: 80%"></div>
  <div class="step p"></div>
  <div class="step p"></div>
  <div class="step p"></div>
  <div class="step p"></div>
</div>

Answer 3

这是另一个思路，代码更少：

.container {
  position: relative;
  margin:20px;
  width: 288px;
  height:50px;
  --i:100%;
  --p:calc(var(--i) - 56px);
  background:
  /*The 4 circles*/
  radial-gradient(circle at center,#E6E6E7 50%,transparent 53%) 100% 0/ 40px 100%,
  radial-gradient(circle at center,blue 50%,transparent 53%) calc(2*100% / 3) 0/ 40px 100%,
  radial-gradient(circle at center,blue 50%,transparent 53%) calc(100% / 3) 0/ 40px 100%,
  radial-gradient(circle at center,blue 50%,transparent 53%) 0 0/ 40px 100%,
  /*The progress bar*/
  linear-gradient(blue,blue) 20px 50%/var(--p) 20% no-repeat,
  /*The bottom Bar*/
  linear-gradient(#E6E6E7,#E6E6E7) center/calc(100% - 20px) 30% no-repeat;
  background-repeat:no-repeat;
}

<div class="container">
</div>
<div class="container" style="--i:75%">
</div>
<div class="container" style="--i:50%">
</div>
<div class="container" style="--i:25%">
</div>