How to put div on progress tag-CodePudding

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" />

CodePudding user response：

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%" />

CodePudding user response：

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  id="sample"></div>