How to give model-viewer loader color as red

Question

Using model-viewer (https://modelviewer.dev/examples/loading/index.html#glbModel) I want to give loading color of my model-viewer as red but I did not find anything related to that in the documentation.

Here is codepen link: https://codepen.io/luxonauta/pen/vYKYppq?editors=1010







  
    
      
        
          
           This pen is a basic demo of the <model-viewer> web component. It makes displaying 3D and AR content on the web easy!

Codepen link demo is fully working only red color is not implemented here: https://codepen.io/luxonauta/pen/vYKYppq?editors=1010

Please help me thanks in advance !!

user_17932715 · Answer

You should apply custom css variables.

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

user_2608515 · Answer

You can easily change the background color with CSS. Right now your demo has

model-viewer {
  width: 100%;
  height: 25rem;
  background-color: #70bcd1;
}

Just change the background color to red:

model-viewer {
  width: 100%;
  height: 25rem;
  background-color: #f00;
}

How to give model-viewer loader color as red

2 Answers