<div class="progress">
<progress id="progress-countdown" max="25" value="2">
<div id="countdown" class="countdown-label"></div>
</progress>
<div class="counter"></div>
</div>
.progress {
width: 158px;
position: relative;
}
.counter {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
let z = document.querySelectorAll("#progress-countdown")[0].value
document.querySelectorAll(".counter")[0].innerHTML = z;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.