Как можно вывести текст поверх Progress Bar?

Question

[hatealleverything]

Добрый день, как я могу вывести текст поверх Progress Bar?

<div class="progress">
<progress id="progress-countdown" max="25" value="25">
<div id="countdown" class="countdown-label"></div>
</progress>
</div>

Хотелось бы вывести текст по центру. Примерно так.


У меня уже есть рабочий код в JavaScripte, но текст поверх Progress Bar не выводится, не могу понять почему.



Выводил текст в JavaScript так

let progressLabel = document.getElementById('countdown')
progressLabel.innerHTML = countdown;

Answer 1

[Andrey Vasilev]

Да вот-вот, только без спама

Comments

[hatealleverything]

Можно ли как-то это реализовать без
transform: translateX(-50%) translateY(-50%);
После того как я его прописываю мои числа начинают постоянно прыгать. В моём-то обнуляющемся таймере, каждые 10мс..

[hatealleverything]

Хотя, я просто убрал transform: translate и пододвинул top и left, всё хорошо работает, спасибо

[Andrey Vasilev]

hatealleverything, трансформ нужен чтобы отцентрировать по вертикали и горизонтали вне зависимости от размера бара. то есть если он у тебя сейчас поменяет ширину - цифры убегут