Get progression of loading screen

Hello guys !

I’m trying to implement a custom Loading Screen with ILoadingScreen.

I have my custom logo working, but i would like to have a progression bar/number.

I’m trying to implement the last part of this documentation Create a custom loading screen - Babylon.js Documentation (Getting File Loading Rate)

Actually my file looks like this and run well :

public run(): void {
	this.engine.loadingScreen = new LoadingScreen();
	this.engine.displayLoadingUI(); //We display the loading screen
	// Load Scene
	SceneLoader.Load("./scene/Cuisine/", "scene.babylon", this.engine, (scene: Scene) => {
		this.scene = scene;
		var data = JSON.parse(window.localStorage.getItem('data'));

		// No camera?
		if (!this.scene.activeCamera) {
			this.scene.createDefaultCamera(true, false, false);

		// Attach camera
		this.scene.activeCamera.attachControl(this.canvas, true);

		// Load extensions
		Tools.LoadFile("./scene/Cuisine/project.editorproject", (data: string) => {
			// Apply extensions (such as custom code, custom materials etc.)
			Extensions.RoolUrl = "./scene/Cuisine/";
			Extensions.ApplyExtensions(this.scene, JSON.parse(data));

I don’t find anywhere a working example of what I’m trying to do. Is it possible ?

Thank’s !

@Nodragem created a progress bar, and I’m sure they would be happy to explain it to you.

Here is the forum link for a discussion, or here is the playground link.

For some reason, it’s broken again. I’ll just @Nodragem again.

Thank you I’ll check his solution !

1 Like


Would be awesome to be able to adjust the logo on the default logo screen on the default loading screen class.
Now only text and background color can be modified - if you want more you need to create a custom loading screen indeed.
In short, the default loading screen could benefit from some standard configuration options like logo, progress bar, maybe even waiting-time music to make the loading more pleasant to keep hanging around until done :wink:

Tip/psychological trick: Counting down works better than counting up toward a total.

1 Like

You can :slight_smile:
just set this url to your image:

BABYLON.DefaultLoadingScreen.DefaultLogoUrl = ...

For music, just play music with plain js until it’s done loading.

var audio = new Audio('audio_file.mp3');;

Then when the scene loads just do



@Givo it seems that the code for my progress bar (Babylon.js Playground) is not working on the Playground because I use accessors (get/set) which are only available when targeting ECMAScript 5 and higher. The code should still work outside the the playground.

@Deltakosh is there a way to set up the typescript compiler of the playground? to be able to chose the target and to remove the error checks would be nice, for instance.

1 Like

:+1: Good to know that it will work!

the PG is targeting es5 already. I’ll check why we have this issue

OK I found why…will fix that asap!

1 Like

so what was it?

pg was not targeting es5 actually :slight_smile:

1 Like