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