JSFiddle - React, Tailwind, and code Playground

HTML

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<progress id="progressbar" value="0" max="100"></progress>
<br />
<br />
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<progress id="progressbar2" value="0" max="100"></progress>
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />Lorem
<br />Ipsum
<br />Dolor
<br />
<div id="horizontal">test</div>

CSS

progress {
    top:150px;
}
#progress2 {
    margin-top: 500px position: relative;
}

JavaScript

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function update(bar, pos) {
    var val = +bar.attr('value'),
        delay = 32,
        delta = (val < pos) ? 1 : -1,
        timer = setInterval(updateVal, delay);

    function updateVal() {
        bar.attr('value', val += delta);
        if ((delta == 1) ? (val >= pos) : (val <= pos)) clearInterval(timer);
    }
}

$(window).scroll(function () {
    var s = $(window).scrollTop(),
        d = $(document).height(),
        c = $(window).height();
    scrollPercent = (s / (d - c)) * 100;
    var position = scrollPercent;

    var p1 = $("#progressbar"),
        p2 = $("#progressbar2");

    if (isScrolledIntoView(p1)) update(p1, position);
    if (isScrolledIntoView(p2)) update(p2, position);
});