with the help of one of my friends here who guided me, I modified the js code like this:

window.onscroll = function () {
    Scroll_Indicator_blog_function()
};

function Scroll_Indicator_blog_function() {
    var winScroll = document.body.scrollTop || document.body.scrollTop;
    var height = document.body.scrollHeight - document.body.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;
}

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

But now I came to a new problem! In the height calculated by this script, the height continues from the highest point of the Mojo account to the bottom of the page, that is, from the top of the header to the bottom of the footer, which is naturally not interesting to show how much of the content has been read by the reader! How can I make it so that the height is only limited to the section in question, that is, for example, it counts the height of the page from the beginning of a section to its end, and does not count the comments section, header and footer? Thanks again for the advice