Change the standard loading screen

Hello , please i want to replace the babylon Logo in the standard loading Screen , and add a new logo with progress bar of loading !

I al ready see this documentation , but it is realy not helpfull egnough ! Create a custom loading screen - Babylon.js Documentation


1 Like

Hi M. Did you do a forum search for ‘loading screen’? Give it a try… you’ll find another thread.

I’ll save you some reading. I think… to get FULL POWER over the loading screen… you must do it like this.

The loading screen turns ON again… for 10 seconds… beginning 5 seconds after the load is finished (for testing/watching).

You need to include lines 2-52 in your project… near the top of the code, like is shown in the playground. You set the URL in line 36.

Good luck! Please try to mention BabylonJS in other parts of your project. Thx. Also, stay tuned for more, and possibly wiser comments/ideas.

PS: Ain’t that the sweetest armature/avatar ya ever seen in your life!? So nice! (not mine)


Thanks for responce , i already do a forum search for ‘loading screen’ but i dont find something interessing;
The solution you send me is great but it is using Css , there is no solution with JS ? i think i can use GUI but i dont the good way to use it !

Thanks again !

1 Like

Yes, you can just create it with a BABYLON.GUI instead of HTML elements & css :slight_smile:


Got demo, aW? (thx)

I happen to be using the GUI for my loading screen for a gamejam! Here’s a quick copy and paste:


something like

engine.loadingScreen = new loadingScreen(scene);

That timing was uncanny! :joy:
Yours is much fancier though, very nice!

yeah that was odd! :smile:
Yours is nice and simple, i like it

1 Like

engine.loadingScreen = new loadingScreen(scene);

Ah, I didn’t know you could set a whole separate scene as the loading screen! That’s perfect.

Thanks a lots , but i get this error Line 66:5 - scene_This is not defined

Ah sorry, that’s my custom variable. Change scene_This to just scene :smile:
Also add in fullscreenGUI.removeControl(loadingSquare); if you haven’t noticed already, as I forgot to remove the square. But really it’s better just to define them in a separate scene like aWeirdo is doing, because then it fades out and it looks really nice!

I’ll rewrite mine to show it better if you’d like!

Alright, I’ve got 2 examples here for you!

This first one here is an example of replacing the engine default loading screen like aWeirdo did, basically just with my own naming conventions and also a fadeout animation. @aWeirdo did an excellent job juggling the scope with his “_this” variable and all of his properties, so most of that I borrowed from his example!

The second one here is in case you don’t really care much for following the same structure as the original loading screen. It’s similar to my first example where everything is very simple, except now everything is in a gui container like aWeirdo’s so it’s a bit easier to manage, and also it has the fadeout animation implemented as well. It uses custom functions to show and hide the UI so using it is very similar to using the engine default.

Feel free to take a look, and let us know if you have any more questions!

Thanks a lots it is what i am searching , i dont understand why tthere isnt a good documentation for Loading Screen … i have just a final question please , i already have a GUI in my scene , how i can make the Loading GUI layer on top of my GUI ?


1 Like

The Z index should already be drawing it on top, but since it isn’t, it could be caused by a couple things. First, try raising the Z index to 2000, and if that doesn’t work, it’s possible it’s because you have 2 fullscreen GUIs, in which case you can get rid of your current in-game full-screenGUI variable and add your in-game GUI controls to the FullscreenGUI used by the loading screen.

Barring all that, the lazy way to do it would be to set your in-game GUI’s visibility property to false in the “showLoadingScreen” function and setting it to true in the “unregisterAnims” function.

Hope that helps!

1 Like

May I ask if this example is really loading screen, or just an animation playing

I ask if this example is really loading screen, or just an animation playing

Hi @ranwei-001
I’m not sure i understand,
Both samples are loading screens made with the BABYLON.GUI & both contains some kind of animation

Hi guys. I am also having a tough time with this, I guess I will end up with switching the visibility like SometimesIMakeThings sugested, because I cant make the zIndex work. I tried modeling my setup like aWeirdos example, because that seems to fit best with the documentation, but my buttons still get rendered on top of my loadingScreen. Also I don’t seem to be able to set the LayerMask properly for my post-processing, so I quickly copy/pasted together a playground if anyone sports my mistakes ?

Nevermind about the postprocessing, just needed to set the active cameras before returning ( scene.activeCameras = [camera, camera2]; ) :man_facepalming:

Now include egg on my face to my previous facepalm, I was reinitialising my advancedTexture :woozy_face:

1 Like

Dear Wingnut
Your example is better, thank you. and I have a might simple question here:
Babylonjs has the following code: (sorry for not remembering exact syntax)

progress_callback( currentNumber, TotalNumber),

so, is it possible to show the exact progress percentage?
with computing out the currentNumber/TotalNumber offered by progress_callback)
I mean in your line#27 this._loadingTextDiv.innerHTML = this._loadingText;
can you please tell how to use this._loadingText to show exact progress percentage ?
thanks any way.