CSS Parts - default progress bar color

[maciekglowka]

Hi,

I am testing the new CSS parts in v1.7 and setting properties as this:

model-viewer::part(default-progress-bar) {
     height:8px;
     background-color: $primary_color;
 }

is not working as expected. The progress bar color is darker than it should (when loading). The desired color shows after loading though and is a permanent bar on top. Clearly there is an overlap of the original grey progress bar on top of the specified background.

What does work is:

    model-viewer::part(default-progress-bar) {
        height:8px;
    }

    model-viewer::part(default-progress-bar)::before {
        background-color: $primary_color;
    }

Which is ok, only the documentation is not clear about it I believe. So I am not sure if it is a glitch and will be changed in the future or we just have to use it like this.

Tested on Win - Firefox,Chrome,Edge + Android Chrome

[elalish]

Thanks for the early feedback! Have you also tried setting the default-progress-mask to display: none? That might be affecting it. Did you say the progress bar never hides in your first example? That sounds bug worthy... And yes, we'll need to make better documentation on this.

[maciekglowka]

Thanks for the reply, unfortunatelly the default-progress-mask does not seem to make a difference.
I have made a recording on how it looks (wthout the ::before fix) - the pinkish colour is the correct one.

20210518_182634.mp4