Wie füge ich Markierungen zu einer Fortschrittsleiste hinzu?

Question

Ich habe einen Fortschrittsbalken und ich möchte an bestimmten Punkten Markierungen hinzufügen (ich finde heraus, wo in Javascript und die 'links' Eigenschaft programmgesteuert festlegen). Ich am Ende mit so etwas wie dies nach dem js Code ausgeführt wird:

.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>

ich die roten Markierungen an der richtigen relativen Position unterhalb des Fortschrittsbalken sehen, aber ich würde sie sie mögen alle zu auf der gleichen Ebene sein, die sich überschneiden.

Idealerweise möchte ich, dass sie oben auf dem Fortschrittsbalken stehen.

Answer 1

Hier ist ein Weg, es zu tun: https://jsfiddle.net/sheriffderek/qe3rmmd4/ - aber ich würde erwarten, dass so etwas mit Leinwand oder Svg in diesen Tagen getan werden.

.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>