Change default loading screen svg and background?

Hello i’ve read that making a custom loading screen is possible but I just want to replace the svg with my own logo and make the background white. Is this possible through code or should I just make a custom one with the exact same html/css (where to find this?)

You can define all needed parameters in the beginning of your script:

BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
if (this._loadingDiv) {
    // Do not add a loading screen if there is already one
this._loadingDiv = document.createElement("div"); = "babylonjsLoadingDiv"; = "0"; = "opacity 1.5s ease"; = "none";
  // Generating keyframes
var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = "@-webkit-keyframes spin1 {                    0% { -webkit-transform: rotate(0deg);}\n                    100% { -webkit-transform: rotate(360deg);}\n                }                @keyframes spin1 {                    0% { transform: rotate(0deg);}\n                    100% { transform: rotate(360deg);}\n                }";
style.innerHTML = keyFrames;
// Loading img
var imgBack = new Image();
imgBack.src = "SomeSource.jpg";
 // = "absolute";
 // = "25%"; = "block"; = "160px"; = "auto"; = "auto"; = "160px";
    // = "-60px";
    // = "-60px"; = "spin1 2s infinite ease-in-out"; = "spin1 2s infinite ease-in-out"; = "50% 50%"; = "50% 50%";
    window.addEventListener("resize", this._resizeLoadingUI); = this._loadingDivBackgroundColor;
    document.body.appendChild(this._loadingDiv); = "1";

I would say that the easiest way is to simply recreate the css rule. Use the browser inspector to retrieve the name of the existing rule.

1 Like

I got this working on all my viewers but I only have one left where I have two canvases, would you perhaps have any idea on how I could display the loading screen on either of these or both while loading? It doesn’t seems to display by default.

I didn’t understand how do you use two canvases - with multiview or with 2 engines?
You may try to use these parameters:
engine.displayLoadingUI(); engine.hideLoadingUI();

Oh I did it in the same way as this page.

I don’t think we can replicate in the playground right.

1 Like