Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.


  • Onsen UI

    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

  • 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() {
        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;