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 screen

Answer 1

Here is a CSS solution with very minimal no. of elements. In this approach we use a combination of linear-gradients and radial-gradients to produce the vertical line and the dots.

The parent #progress-bar element produces the lightgreen (initial) line and circles while the same gradients are added to the child #progress-now element which is positioned absolutely with respect to the parent. The only difference is that the height of the #progress-now element is determined based on the value attribute.

The solution would work even when the values are in fractions. I know you are using it for step tracker but this is just an added use (blowing my own trumpet :D).

window.onload = function() {
  var val = document.getElementById('progress-now').getAttribute('value');
  var progress = (val * 50 > 400) ? 400 : val*50; /* 50 is 1/8th of height, 400 is height */
  document.getElementById('progress-now').setAttribute('style', 'height: ' + progress + 'px');
}

#progress-bar {
  position: relative;
  height: 400px;
  width: 200px;
  background: linear-gradient(to bottom, lightgreen 99.9%, transparent 99.9%), radial-gradient(circle at 50% 50%, lightgreen 25%, transparent 30%);
  background-position: 50% 0%, 50% 15px; /* 15px is 30% of 50px */
  background-size: 5px 100%, 50px 50px; /* 5px is the thickness of the bar, 50px is 1/8th of the height */
  background-repeat: no-repeat, repeat-y;
}
#progress-now {
  position: absolute;
  width: 200px;
  background: linear-gradient(to bottom, darkgreen 99.9%, transparent 99.9%), radial-gradient(circle at 50% 50%, darkgreen 25%, transparent 30%);
  background-position: 50% 0%, 50% 15px;
  background-size: 5px 100%, 50px 50px;
  background-repeat: no-repeat, repeat-y;
  z-index: 1;
}

---

Below is a version with fill-up animation effect.

window.onload = function() {
  var val = 0, progress = 0;

  function progressBar() {
    val += 0.005;
    progress = (val * 50 > 400) ? 400 : val * 50; /* 50 is 1/8th of height, 400 is height */
    document.getElementById('progress-now').setAttribute('style', 'height: ' + progress + 'px');
    if (val <= 8) anim = window.requestAnimationFrame(progressBar);
  }
  
  progressBar();
}

#progress-bar {
  position: relative;
  height: 400px;
  width: 200px;
  background: linear-gradient(to bottom, lightgreen 99.9%, transparent 99.9%), radial-gradient(circle at 50% 50%, lightgreen 25%, transparent 30%);
  background-position: 50% 0%, 50% 15px; /* 15px is 30% of 50px */
  background-size: 5px 100%, 50px 50px; /* 5px is the thickness of the bar, 50px is 1/8th of the height */
  background-repeat: no-repeat, repeat-y;
}
#progress-now {
  position: absolute;
  width: 200px;
  background: linear-gradient(to bottom, darkgreen 99.9%, transparent 99.9%), radial-gradient(circle at 50% 50%, darkgreen 25%, transparent 30%);
  background-position: 50% 0%, 50% 15px;
  background-size: 5px 100%, 50px 50px;
  background-repeat: no-repeat, repeat-y;
  z-index: 1;
}