Progress bas с помощью Intersection Observer

Помогите, пожалуйста, реализовать Reading Progress Bar на Intersection Observer. Я очень много искал в интернете, но ничего не нашел, большинство примеров были с использованием "scroll". Прогресс бар должен быть написан только с помощью Intersection Observer, без использования window.onscroll и/или "scroll".

В моем коде рассчитывается длина прогресс бара, но там есть ошибка (показывает около 108% вместо 100), не знаю как сделать правильно. И что нужно сделать, чтобы аннимировать progress bar?

const mainElement = document.querySelector('.main_content');
const progressBarTop = document.querySelector('.with-progress-reading-bar');
const percentageOfElement = Math.floor((mainElement.scrollHeight / document.body.scrollHeight) * 100);

const options = {
    threshold: 0
};

const observer = new IntersectionObserver(function (entries, observer) {
    entries.forEach(entry => {

        let heightOfVP = window.innerHeight;
        let heightOfElement = entry.target.getBoundingClientRect().height;
        let progressPercentage = 0;

        if (entry.isIntersecting) {
            progressPercentage = Math.round((window.scrollY / (heightOfElement - heightOfVP)) * percentageOfElement);

            progressBarTop.style.width = progressPercentage + '%';
        }
    })
}, options);

observer.observe(mainElement);