Trying to hide progress bar

[BenSztukowski]

Hi, according to documentation, I should be able to alter the properties of the progress bar with something similar to this:

model-viewer::part(default-progress-bar) {
        display: none;
 }

But is has no effect. I am building ads in Google Web Designer if that is relevant. In the program is what I assume is an extended class from model-viewer, called . It is possible that the part is not exported, but I really am not sure.

So I've tried various combos of CSS to no effect.
I am able to alter the few variables there are, like so:

#model {
      --progress-bar-color: none;
}

or

#model {
     --progress-bar-height: 0px;
}

but the component is still there, thusly..

[samaneh-kazemi]

Hi @BenSztukowski , thanks for reaching out. Which version of model-viewer are you using? Can you also share a repro link that we can try?

[samaneh-kazemi]

@elalish any thoughts?

[elalish]

@BenSztukowski I think that's because Google Web Designer is a few versions behind with MV. We're working on getting that fixed. In the meanwhile, a quick way to hide the progress bar is using the slot. Just slot in an empty div and that'll replace everything with something invisible.

[BenSztukowski]

Thanks for responding. I don't have a repo for the code. I couldn't get the slot to work. It didn't seem to recognize the div inside as a child element of model viewer. I assume this is because like you said, it is an older version. The css variables thankfully were sufficient to overcome the difficulty I was having (the progress bar was staying onscreen and obscuring content after the model was loaded, but with variable adjustments, is now not visible at all)

[pragavame]

model-viewer {
  --progress-bar-color: transparent;
}

[jovanygonzalez]

none working on @google/[email protected] using angular ts. :

model-viewer {
--progress-bar-color: transparent;
}

model-viewer::part(default-progress-bar) {
display: none;
}

<div slot="progress-bar" style="display: none">

any suggestion?

[BenSztukowski]

I've had success using the following CSS (use id="model" in your element declaration):
#model {
--progress-bar-color: none;
--progress-bar-height: 0px;
}