0
285
VistasHow to give model-viewer loader color as red
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
<!-- Loads <model-viewer> for modern browsers-->
<script type="module" src="https://unpkg.com/@google/model-viewer@latest/dist/model-viewer.js"></script>
<!-- Loads <model-viewer> for old browsers like IE11-->
<script type="nomodule" src="https://unpkg.com/@google/model-viewer@latest/dist/model-viewer-legacy.js"></script>
<main>
<section class="has-dflex-center">
<div class="lx-container-80">
<div class="lx-row">
<div class="lx-card bs-lg">
<model-viewer src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.glb?1542147958948" ios-src="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b/Astronaut.usdz?v=1569545377878" poster="https://cdn.glitch.com/36cb8393-65c6-408d-a538-055ada20431b%2Fposter-astronaut.png?v=1599079951717" alt="A 3D model of an astronaut!" shadow-intensity="1" camera-controls="true" auto-rotate="true" ar="true"></model-viewer>
<p class="text"><i class="fas fa-hand-point-right"></i> This pen is a basic demo of the <model-viewer> web component. It makes displaying 3D and AR content on the web easy!</p>
</div>
</div>
</div>
</section>
</main>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 !!
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
You should apply custom css variables.
model-viewer {
--progress-bar-color: red;
}
·
Juan Pablo Isaza
Denunciar
0
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;
}
·
Juan Pablo Isaza
Denunciar
Responde la pregunta