html - Progress bar made of solid line, with dots as steps

Question

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)

Answer 1

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>