我正在尝试创建一个垂直的进度条,实线上有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>
