Monaca Onsen UI Discord Chat Github Repo

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