How do I add marks to a progress bar?

Question

I have a progress bar and I would like to add marks to it at certain points (I figure out where in javascript and set the 'left' property programmatically). I end up with something like this after the js code runs:

.marker {
    width:2px;
    background-color:#f00;
    position:relative;
}

<!-- div for a progress bar here -->
<div>
 --- progress bar here --- --- progress bar here --- --- progress bar here ---
</div>

<!-- div for markers here -->
<div>
  <div class="marker" style='left:0%;'>&nbsp;</div>
  <div class="marker" style='left:10%;'>&nbsp;</div>
  <div class="marker" style='left:20%;'>&nbsp;</div>
  <div class="marker" style='left:30%;'>&nbsp;</div>
  <div class="marker" style='left:40%;'>&nbsp;</div>
  <div class="marker" style='left:50%;'>&nbsp;</div>
  <div class="marker" style='left:60%;'>&nbsp;</div>
  <div class="marker" style='left:100%;'>&nbsp;</div>
</div>

I can see the red markers at the correct relative position underneath the progress bar but I'd like them them all to be on the same level overlapping one another.

Ideally, I'd like them to be on top of the progress bar.

Answer 1

Here is one way to do it: https://jsfiddle.net/sheriffderek/qe3rmmd4/ - however, I would expect something like this to be done with canvas or svg these days.

.progress-bar {
  position: relative;
  width: 100%;
  height: 40px;
  max-width: 200px;
  background: gray;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 23%;
  height: 100%;
  background: blue;
}

.marker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.marker-list .marker {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: red;
}

<div class='progress-bar'>

  <div class="bar"></div>

  <ul class="marker-list">
    <li class="marker" style='left:10%;'></li>
    <li class="marker" style='left:20%;'></li>
    <li class="marker" style='left:30%;'></li>
    <li class="marker" style='left:40%;'></li>
    <li class="marker" style='left:50%;'></li>
    <li class="marker" style='left:60%;'></li>
    <li class="marker" style='left:70%;'></li>
    <li class="marker" style='left:80%;'></li>
    <li class="marker" style='left:90%;'></li>
  </ul>

</div>