html – 由实线制成的进度条,以点为步骤

我正在尝试创建一个垂直的进度条,实线上有8个点(最后是第8个),每个点代表该过程的一个步骤.见附件截图(在底部防止这个问题会被打破).

当然,我已经尝试在HTML和CSS中提供一些东西,您可以在this fiddle(代码如下)中看到.这个问题是,我找不到在浅绿色线上创建7个点的方式,而不添加8个div(8,因为第一个也必须在那里).

功能方面,我希望JS检查progressNow-div的值,将其多播100,并将其作为css-height添加到progressNow类.这个问题是,点移动,而不是酒吧填满. (这是否有意义？)

这使我想到在截图中可以看到的形状中创建一个SVG元素,它具有根据过程中第n个步骤改变位置的渐变.我知道这将工作,我知道我可以让它工作,但我想知道是否有另一个,也许更容易,实现我想要实现的方式.

HTML

<div id="progress">
    <div class="progressBar"></div>
    <div class="progressNow" value="1"></div>
    <div class="progresstotal"></div>
</div>

CSS

#progress {
    position: relative;
}

#progress .progressBar {
    height: 800px;
    width: 6px;
    background: #8fe4bf;
    position: absolute;
}

#progress .progressNow {
    height: 100px;
    width: 6px;
    background: #00b164;
    position: absolute;
}

#progress .progressNow::after {
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #00b164;
    display: block;
    margin-left: -5px;
    position: absolute;
    top: 90px;
}

期望的结果(在这种情况下,progressNow的值为2)

解决方法

我的解决方案类似于@ Stewartside,除了它使用FlexBox来平衡所有的一切.改变高度也很容易.

ul.progress-bar {
  height: 300px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
ul.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5px;
  background: #777;
  width: 5px;
  height: 100vh;
}
ul.progress-bar li {
  background: #000;
  border-radius: 100px;
  width: 15px;
  height: 15px;
  z-index: 1;
  position: relative;
}
ul.progress-bar li.stop ~ li {
  background: #777;
}
ul.progress-bar li.stop ~ li::after {
  height: 0;
}
ul.progress-bar li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 5px;
  background: #000;
  width: 5px;
  height: 100vh;
}

<ul class="progress-bar">
    <li>
    <li>
    <li>
    <li class="stop">
    <li>
</ul>

由于某些原因,底部段似乎没有显示在stacksnippet中,所以在这里是jsfiddle.