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.

How to make onsen-progress-bar hidden and change the color?

  • Hello, its me again.
    I want to ask how to make onsen-progress-bar hidden as the default, and just display if me call it with jscript.
    me already try something like this :

    <ons-progress-bar indeterminate hidden></ons-progress-bar> 

    but it doesn’t work.

    My program workflow is like this :

    • open main menu , click list
    • a new page open
    • do “if page.matches”
    • if success then will show the progress bar and call ajax
    • ajax success, the progress bar will hide and call other ajax
    • show the other progress bar while call the ajax
    • the other ajax success, the progress bar will hide automatically.

    and for the last, how to change the color of the progress bar? already tried using jscript ( i use random color method in jscript) and it doesn’t work for me.


  • Onsen UI

    @dvlwjoffice Hi! As far as I know there is no hidden attribute for any element. The way you hide an ons-progress-bar is the exact same way you hide anything else in HTML/CSS. Apply display: none, visibility: hidden or opacity: 0 rules. You can make your own hidden attribute if you want in CSS:

    ons-progress-bar[hidden] {
      display: none;

    For the colors, have a look at the DOM and see what classes are applying the current colors. It should be .progress-bar__primary and .progress-bar__secondary for iOS; and .progress-bar--material__primary and .progress-bar--material__secondary for Andriod. Simply override these CSS classes with your custom background-color property. Otherwise, you can generate your own custom theme with this tool.

  • @Fran-Diox its work for [hidden] but not for color :/
    are you sure it was like that?

  • Onsen UI

    @dvlwjoffice said:

    are you sure it was like that?

    Pretty sure :sweat_smile:

    Just inspect the DOM and modify whatever you need.

  • @Fran-Diox Ah i see, its work if it doesn’t indeterminate, but mine is indeterminate. Do you have a trick to it?

  • Onsen UI

    @dvlwjoffice Yes, the same trick. Check the DOM (right click on an element and hit “Inspect”) and see what’s the class. In that case, it’s .progress-bar--indeterminate:before and .progress-bar--indeterminate:after.

  • @Fran-Diox i see, i got it now, it will be something like this :

    .progress-bar--indeterminate:before {
        background-color: red!important;
        background-color: green !important;
    .progress-bar--indeterminate:after {
        background-color: blue !important;

    Thanks so much frans