What needs to be done so that the progress bar appears on the specified scroll?

Question

Layout

Good morning!
I have no idea, I couldn't even find it on the Internet (or I'm a bad Googler);
It is necessary that when the scroll reaches the middle of the page, a progress bar appears, but there is a progress counter with animation.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-circle-progress/1.2.2/circle-progress.min.js"></script>
let options = {
        startAngle: -1.55,
        size: 150,
        value: 0.65,
        fill: {gradient: ['#00ffff', '#00ccff']}
};

$(".circle .bar").circleProgress(options).on('circle-animation-progress',
function(event, progress, stepValue){
$(this).parent().find("span").text(String(stepValue.toFixed(2).substr(2)) + "%");
});

$(".js .bar").circleProgress({
value: 0.50
});

Answer 1

let center = document.body.clientHeight /2 // Получаем кол-во пикселей с верха до центра экрана

let documentSize = document.body.scrollHeight // Получаем всю высоту страницы. 
let scrollTop = window.pageYOffset // На сколько мы прокрутили текущую страницу

//Событие которое реагирует на прокрутку страницы
window.addEventListener('scroll', function() {});