@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
5fe0a3c8da81f894393498.jpeg

Вопрос: как добавить в прогресс бар число с % соотношением заполнения этого прогресс бара?
Чтобы помимо полоски с градиентом отображалось число (впринципе прямо на ней).
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
\( ゚ヮ゚)/
$(window).scroll(function () {
    let ratio = $(document).scrollTop() / (($(document).height() - $(window).height()) / 100);
+   $("#progressbar").text(ratio + "%");
    $("#progressbar").width(ratio + "%");
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Intspirit Краснодар
от 80 000 до 150 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽