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.
thanks
-
@dvlwjoffice Hi! As far as I know there is no
hidden
attribute for any element. The way you hide anons-progress-bar
is the exact same way you hide anything else in HTML/CSS. Applydisplay: none
,visibility: hidden
oropacity: 0
rules. You can make your ownhidden
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 custombackground-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?
-
@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?
-
@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; } .progress-bar--indeterminate{ background-color: green !important; } .progress-bar--indeterminate:after { background-color: blue !important; }
Thanks so much frans