Scroll Indicator in my wordpress site not working?

I am designing a site and I want to create a Scroll Indicator for my blog pages. In fact, I did something like this several months ago, but no matter what I did, I did not get results, so in fact, I abandoned the Scroll Indicator section and started designing other I looked at the parts and components until I came back to it another day and solved the problem, but today when I came back it still didn’t work!
I use this code:

<div class="progress-container">
    <div class="progress-bar" id="Scroll_Indicator_blog"></div>
</div>

// scroll bar script
window.onscroll = function () {
    Scroll_Indicator_blog_function()
};

function Scroll_Indicator_blog_function() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.getElementById("Scroll_Indicator_blog").style.width = scrolled + "%";
}

.progress-container {
    position: fixed;
    top: 0;

    display: block;
    width: 100%;
    height: 8px;
    background: var(--vesal-background-color7);
    z-index: 9999;
}
.progress-bar {
    height: 100%;
    background: var(--vesal-background-color2);
    box-shadow: 0 5px 10px 0 var(--vesal-boxshadow-color-1);
    width: 0%;
    transition: ease-in-out 0.5s;
}

I have tried almost everything that I can think of. In fact, if you inspect my site, you will find that by changing width: 0% and increasing it to another percentage, the mentioned golden line that indicates the volume read from your page to It is displayed correctly, so I am almost sure that the problem is in the js section, or is there a need for a special library to perform this process? Of course, I must say that I used w3s in the overall design of this section, which I will post the link below. Thank you for guiding me
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp