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

[dvlwjoffice]

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.

thanks

[Fran Diox]

@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.

[dvlwjoffice]

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

[Fran Diox]

@dvlwjoffice said:

are you sure it was like that?

Pretty sure :sweat_smile:

Just inspect the DOM and modify whatever you need.

[dvlwjoffice]

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

[Fran Diox]

@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.

[dvlwjoffice]

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

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

Thanks so much frans