progress {
position: relative
}
progress::after {
position: absolute;
content: "";
display: block;
width: 10px;
height: 100%;
background: red;
left: calc(var(--x) - 5px)
}<progress value="80" max="100" style="--x: 25%" />Solution 1 :
Solution 2 :
Initially, I am getting all the information about the size of the progress tag and its position relative to the viewport using Element.getBoundingClientRect()
Then set the position of the new div as per the dimensions.
let progressBarDOMData = document.getElementById('foo').getBoundingClientRect();
let extraDivEle = document.getElementById('sample');
extraDivEle.style = 'padding-top:' + progressBarDOMData.height + 'px';
extraDivEle.style.left = progressBarDOMData.width / 2 + 'px';
extraDivEle.style.top = progressBarDOMData.y + 'px';.sample {
background-color: #e41111;
position: absolute;
padding-left: 5px;
}<progress value="80" max="100" id="foo"></progress>
<div class="sample" id="sample"></div>Problem :
Let’s say I have progress tag which imitate progress bar for video. In this case video last 100 seconds and we are currently at 80 seconds.
I would like to place a div square in 50 seconds of the video (on our progress bar):
So my expected result will be:
I have no idea how I can set such a div to just 50 seconds, because in future I would like to have more than one div to be place on this progress bar for many different second
<progress value="80" max="100" />Comments
Comment posted by Dimava
It’s better to reimplement
Comment posted by A Haworth
Do you need them to be divs? And do you want to place them at regular intervals?
Comment posted by A Haworth
This doesn’t seem to work in Safari, I think progress elements support before and after pseudo elements in only some browsers (?Blink??).
Comment posted by j08691
Answers should never be just code dumps. Please explain your answer fully for the OP and the rest of the visitors to this question