Как добавить число в «%» в прогресс бар?

Question

[mrBigRush]

Есть прогресс бар, который заполняется по мере отображения контента на экране(прокруткой вниз):

<div id="progressbar-div">
     <div id="progressbar"></div>
</div>

#progressbar-div {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    height: 5px;
    z-index: 9999;
}
#progressbar {
    background: linear-gradient(45deg, #30cfd0, #330867);
    width: 0%;
    height: 5px;
    border-radius: 5px;
}

$(window).scroll (function () {
    let ratio = $(document).scrollTop () / (($(document).height () - $(window).height ()) / 100);
    $("#progressbar").width (ratio + "%");
});

что в результате дает следующее:

spoiler

Вопрос: как добавить в прогресс бар число с % соотношением заполнения этого прогресс бара?
Чтобы помимо полоски с градиентом отображалось число (впринципе прямо на ней).

Answer 1

[Александр]

$(window).scroll(function () {
    let ratio = $(document).scrollTop() / (($(document).height() - $(window).height()) / 100);
+   $("#progressbar").text(ratio + "%");
    $("#progressbar").width(ratio + "%");
});

Comments

[Alex]

А как это вы так выделили одну строку ? ))

[Евгений]

30 сек на гуглеж потратил, никогда не учив jQ.... вот что лень с людьми делает))

[Александр]

Alex, lang=diff, пример в профиле есть ;) Ещё можно тут посмотреть, только вроде @@ не работает.

[Евгений]

А так не работает?

$("#progressbar").width(ratio + "%").text(ratio + "%");

[mrBigRush]

.text(ratio + "%")
Работает. Спасибо за помощь)
Теперь осталось разобраться как его отцентровать и уменьшить до сотых значения после точки.

[Александр]

mrBigRush, Сотые значения - самый простой способ .toFixed, посложнее - умножение, округление и потом деление. Центрирование - CSS.