set a loading animation with a-frame - aframe

Question

I am using a-frame to load panorama photo with the sample code below. It shows a white screen while the photo is being loaded, and it lasts a few seconds, which create a bad user experience. I want to add a loading animation while the photo is being loaded, but cannot find any useful guides. Could anyone help?
<a-scene>
<a-assets>
<img id="sky" src="sky.png">
</a-assets>
<a-sky src="#sky"></a-sky>
</a-scene>

Answer 1

I think aframe 8 will have a built in loading screen. In the meantime here's how I currently tackle it for aframe scenes exported from Ottifox:
First before the a-scene tag and after the start of the body I have this markup:
<div id="splash">
<div class="loading"></div>
</div>
Then in a css file:
#splash {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 200px;
margin: auto;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loading {
width: 24px;
height: 24px;
border-radius: 50%;
border: 0.25rem solid rgba(255, 255, 255, 0.2);
border-top-color: white;
animation: spin 1s infinite linear;
}
Finally in main.js
document.addEventListener('DOMContentLoaded', function() {
var scene = document.querySelector('a-scene');
var splash = document.querySelector('#splash');
scene.addEventListener('loaded', function (e) {
splash.style.display = 'none';
});
});
You can view source on the example here, to see it all together:
http://ottifox.com/examples/space/index.html

Answer 2

I can point you in the right direction. Generally speaking; first create something to be shown while everything loads; then after it loads hide it, or do whatever you wish.
For example create a fullscreen div with large z-index, it could show some loader animation for example. Then use javascript - either normal way, or the A-Frame recommended way (build a component for it) - to hide the div.
window.onload = function() {
/* hide loading div */
}
window.onload event is fired after entire page is loaded, including images - which is exactly what you need.

Answer 3

I just built out a pretty in depth load screen replacement for a-frame. You can see the code and demo here: https://glitch.com/edit/#!/a-load-screen
I handle a lot there, but the short version is:
make a full screen div, style as you like, and use z-index to put it on top of the a-scene element
add a listener to document.querySelector('a-scene') for renderstart
aframe will fire that when all the stuff from a-assets as has loaded (or timed out), so you don't need to add custom handling for the various kinds of assets you'll see there
A small code snippet to get you started:
scene.addEventListener('renderstart', (function onAframeRenderStart() {
let haveRun = false;
return () => {
console.warn("RENDER START")
if (haveRun) return;
haveRun = true;
setTimeout(() => {
document.querySelector('.load-div').classList.add('hide-loader');
document.querySelector(".load-div").style.display = "none"
}, 2500)
}
})());