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

概述我正在尝试创建一个垂直的进度条,实线上有8个点(最后是第8个),每个点代表该过程的一个步骤.见附件截图(在底部防止这个问题会被打破). 当然,我已经尝试在HTML和CSS中提供一些东西,您可以在this fiddle(代码如下)中看到.这个问题是,我找不到在浅绿色线上创建7个点的方式,而不添加8个div(8,因为第一个也必须在那里). 功能方面,我希望JS检查progressNow-div的值,将 我正在尝试创建一个垂直的进度条,实线上有8个点(最后是第8个),每个点代表该过程的一个步骤.见附件截图(在底部防止这个问题会被打破).

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

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

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

HTML

<div ID="progress">    <div ></div>    <div  value="1"></div>    <div ></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 >    <li>    <li>    <li>    <li >    <li></ul>

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

总结

以上是内存溢出为你收集整理的html – 由实线制成的进度条,以点为步骤全部内容，希望文章能够帮你解决html – 由实线制成的进度条,以点为步骤所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。