Как сверстать прогресс-бар?

Question

[Клим Куликов]

Нужно сделать вот такой прогресс-бар


Есть сейчас


код

<div class="wrapper">
                                    <div class="progress">
                                        <div class="progress__line-bg">
                                            <span class="progress-text">Вопрос 1 из 5</span>
                                            <div class="progress__line"></div>
                                        </div>
                                    </div>
                                </div>

.wrapper {
    margin: 0 auto;
    max-width: 500px;
    width: 100%;
}

.progress__line {
    width: 77px;
    height: 26.63px;
    background: #FF2040;
    bottom: 0;
    padding-top: 3.33px;
    padding-bottom: 3.33px;
    border-radius: 100px;
    
}

.progress__line-bg {
    background: #F6F6F6;
    border-radius: 100px;
    border: 1px solid #CFCFCF;
    box-sizing: border-box;
    height: 26.63px;
    /* overflow: hidden; */
    width: 100%;
    text-align: center;
}

.progress-text {
    text-align: center;
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 18px;
    color: #000;
}

Answer 1

[Сергей delphinpro]

У вас уже всё свёрстано, только меняйте значение ширины:

document.queryselector('.prodress-line').style.width = '10%';

и у .progress__line уберите вертикальные внутренние отступы (padding-top, padding-bottom)

Comments

[Клим Куликов]

сама красная линия съехала вниз, и мне не нужен JS, этот прогресс-бар статичен

[Сергей delphinpro]

Иван Куликов, тогда вообще не понимаю проблемы.
Открывайте dev-tools, смотрите что не сходится, и поправляйте.

[Клим Куликов]

Сергей delphinpro, да вот в том то и дело, что я не могу понять в чём проблема, а в dev-tools ничего не нашёл

Answer 2

[Сергей Т]

для .progress__line-bg добавь:
position: relative;
а для .progress__line удали падинги и добавь:

position: absolute;
top: 0;
left: 0;
height: 100%;

и маленький совет, используйте целые числа в размерах)