I am currently working on creating a vertical progress bar with 8 dots displayed on a solid line, where each dot represents a step in the process. Please refer to the attached screenshot (located at the bottom of this question to maintain clarity).
My attempts using HTML and CSS can be viewed in this fiddle (code provided below). However, I have encountered a challenge in displaying the 7 dots on the light-green line without having to add 8 additional div elements.
In terms of functionality, my goal is for JavaScript to check the value of the `progressNow` div, multiply it by 100, and apply that as the CSS height for the `progressNow` class. The issue here is that the dot moves instead of the bar filling up. (Does this explanation make sense?)
This has led me to consider creating an SVG element resembling the shape shown in the screenshot, with a gradient that shifts based on the nth step in the process. While I believe this approach will work, I am curious if there is another, potentially simpler method to achieve my desired outcome.
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 outcome (assuming the `value` of `progressNow` is `2`)