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