Как сделать постоянно видимой метку прогрессбара Bootstrap?

Question

[Staspost]

Есть стандартный прогрессбар Bootstrap 5.1:

<div class='progress'>
            <div class='progress-bar progress-bar-striped progress-bar-animated' role='progressbar' aria-valuenow='0' aria-valuemin='0' aria-valuemax='100' style='width: 0%' id='progress'>Ваш прогресс 0%</div>
            </div>

Суть проблемы в том, что метка прогрессбара не видна до тех пор, пока прогрессбар не заполнится хотя бы частично.
Как можно сделать, чтобы метка была видна независимо от заполнения прогрессбара?

Comments

[Kataev]

А что имеется в виду под меткой?

[Staspost]

Kataev, в данном примере текст "Ваш прогресс 0%". Он выводится внутри блока цветной части прогрессбара, пока она имеет низкий width, то и текст в нем не виден.

[Kataev]

Так может тогда задать цвет фона прогрессбара или цвет текста?

[Staspost]

Kataev, Пробовал. Тут дело в том, что текст ограничивается физическим размером самого блока полоски прогрессбара. Т.е., он состоит из двух div разного фона. Внешний div - серая полоска постоянной длины. В нем внутренний div, цветная полоска, увеличивающаяся через изменение style='width: 0%'.
Соответственно, текст обрезается размером этого div и изменение цвета ничего не дает. Перенос на родительский div тоже не решает проблему, поскольку текст позже начинает закрываться внутренним div.

[Kataev]

Staspost, вариант так себе, но можно переопределить

Answer 1

[Mesuti]

Comments

[Staspost]

Да, работает, спасибо.