Loading Image in custom screen

Questions
1

Hi, I tried to work on a custom loading screen by adding a spinning picture. I tried with Create a custom loading screen - Babylon.js Documentation. Could someone give me an example with img using the template inside the link?

2

Add a hidden image with CSS rotation animation to the center of your canvas.
Then the implementation is rather trivial:

class MyLoadingScreen implements ILoadingScreen {
  //optional, but needed due to interface definitions
  public loadingUIBackgroundColor: string;
  private imageElement: HTMLElement;
  constructor(public loadingUIText: string) {
    this.imageElement = document.getElementById('your_wonderful_id'); // or any other way
  }

  public displayLoadingUI() {
    this.imageElement.style.display = 'block';
  }

  public hideLoadingUI() {
    this.imageElement.style.display = 'none';
  }
}

To make it nicer, add fade effect when setting display to none. You can do that by setting opacity instead of display.

2 Likes