相关疑难解决方法(0)

我正在尝试创建一个垂直进度条,实线上有8个点(末端是第8个),其中每个点代表该过程中的一个步骤.请参阅附件截图(在底部以防止此问题将被分解).

当然我已经尝试用HTML和CSS制作一些东西,你可以在这个小提琴中看到(下面的代码).问题是,我找不到在浅绿线上创建7个点的方法,而不添加8个div(8因为第一个也必须在那里).

功能的角度来看,我想JS检查value中的progressNow-div,100多重,并补充说,作为一个CSS-高度的progressNow-class.问题在于点会移动,而不是条形填充.(这有意义吗？)

这让我想到了在屏幕截图中可以看到的形状创建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;
}

期望的结果(在此情况下,value的progressNow …