ons-progress-bar

[OnsenUI]

The component is used to display a linear progress bar. It can either display a progress bar that shows the user how much of a task has been completed. In the case where the percentage is not known it can be used to display an animated progress bar so the user can see that an operation is in progress.

Click here to see the original article

[MelvinG24]

Re: ons-progress-bar

I am creating my app with OnsenUI, and I am using the <ons-progress-bar> tag but it does not work, any suggestions? here is the code:

The problem that I have is my code never gets inside myFunction() function; Additionally, document.body.scrollTop always give 0 (zero) as a value

On my HTML file I have it like this:

<ons-progress-bar id="pBar" value="10"></ons-progress-bar>

and, on my JS file I have it like this:

document.addEventListener("scroll", myFunction)

function myFunction() {
    console.log('inside')
    let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    let scrolled = (winScroll / height) * 100;
    console.log(winScroll, height, scrolled)
    if (pg != 'home') {
        document.querySelector("#pBar").value = scrolled;
    }
}