I'm trying to create a progress bar using only html and css and I can't make the image to move along if the progress bar changes. For example, if I set it to 25%, 50%, 75%, I want a dot at the end of the progress spectrum.
Here is my HTML Code:
<div class="progress">
<div class="progress-bar">
<img src="http://placehold.it/10x10">
</div>
</div>
And this is my CSS:
.progress {
height:2px;
width:300px;
background-color: gray;
position: relative;
}
.progress-bar {
height:2px;
width:20%;
position: absolute;
background-color: red;
}
.progress-bar img {
position: absolute;
}
Where am I getting it wrong?
<progress value="70" max="100">70 %</progress>