进度条由实线组成，以点为步骤 [英] Progress bar made of solid line, with dots as steps

问题描述

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

当然，我尝试用 HTML 和 CSS 制作一些东西，你可以在

解决方案

我的解决方案与@Stewartside 的类似，不同之处在于它使用 Flexbox 将所有内容均等地定位.改变高度也很容易.

ul.progress-bar {高度:300px；列表样式:无；边距:0；填充:0；位置:相对；显示:弹性；弹性方向:列；对齐内容:间隔；溢出:隐藏；}ul.progress-bar::after {内容: "";位置:绝对；顶部:0；左:5px；背景:#777；宽度:5px；高度:100vh；}ul.progress-bar li {背景:#000；边框半径:100px；宽度:15px；高度:15px；z-索引:1；位置:相对；}ul.progress-bar li.stop ~ li {背景:#777；}ul.progress-bar li.stop ~ li::after {高度:0；}ul.progress-bar li::after {内容: "";位置:绝对；底部:0；左:5px；背景:#000；宽度:5px；高度:100vh；}

<li></li><li></li><li></li><li class="stop"></li><li></li>

出于某种原因，底部的部分似乎没有出现在 stacksnippet 中，所以它位于 jsfiddle.

I'm trying to create a vertical progress-bar, with 8 dots on a solid line (with the 8th on the end), where every dot stands for one step in the process. See attached screenshot (in the bottom to prevent this question will be broken up).

Of course I have tried to make some stuff in HTML and CSS, which you can see in this fiddle (code below). The problem with this is, that I can't find a way to create the 7 dots on the light-green line, without adding 8 more divs (8 because the first also has to be there).

Functionality-wise, I want JS to check the value of the progressNow-div, multiplay it by 100 and add that as a CSS-height to the progressNow-class. Problem with this is that the dot will move, instead of the bar filling up. (does this make sense?)

This has made me think of creating an SVG element in the shape you can see in the screenshot, that has a gradient that changes location based on the nth step in the process. I know this will work and I know I can get it to work, but I was wondering if there's another, maybe easier, way to achieve what I'm trying to achieve.

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

Desired result (in this case, the value of progressNow is 2)

解决方案

My solution is similar to @Stewartside's, except it uses Flexbox to position everything equally. It's also really easy to change the height.

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>
    <li></li>
    <li class="stop"></li>
    <li></li>
</ul>

For some reason, the bottom segment doesn't seem to show up in the stacksnippet, so here it is on jsfiddle.

这篇关于进度条由实线组成，以点为步骤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！