Change default loading screen svg and background?

Questions
1

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?)

2

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
    return;
}
this._loadingDiv = document.createElement("div");
this._loadingDiv.id = "babylonjsLoadingDiv";
this._loadingDiv.style.opacity = "0";
this._loadingDiv.style.transition = "opacity 1.5s ease";
this._loadingDiv.style.pointerEvents = "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;
document.getElementsByTagName('head')[0].appendChild(style);
// Loading img
var imgBack = new Image();
imgBack.src = "SomeSource.jpg";
 //   imgBack.style.position = "absolute";
 //   imgBack.style.left = "25%";
        imgBack.style.display = "block";
        imgBack.style.width = "160px";
    imgBack.style.marginLeft = "auto";
    imgBack.style.marginRight = "auto";
    imgBack.style.marginTop = "160px";
    // imgBack.style.marginLeft = "-60px";
    // imgBack.style.marginTop = "-60px";
    imgBack.style.animation = "spin1 2s infinite ease-in-out";
    imgBack.style.webkitAnimation = "spin1 2s infinite ease-in-out";
    imgBack.style.transformOrigin = "50% 50%";
    imgBack.style.webkitTransformOrigin = "50% 50%";
    this._loadingDiv.appendChild(imgBack);
    this._resizeLoadingUI();
    window.addEventListener("resize", this._resizeLoadingUI);
    this._loadingDiv.style.backgroundColor = this._loadingDivBackgroundColor;
    document.body.appendChild(this._loadingDiv);
    this._loadingDiv.style.opacity = "1";
};
3

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
4

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.

5

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();

6

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

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

1 Like