set a loading animation with a-frame

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>

score 5 · Answer 1 · answered Dec 30 '17 at 20:35

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

this example is awesome. Do you have an version with an percentage number rising? — Delidragon, Aug 28 '18 at 13:06

score 0 · Answer 2 · answered Dec 30 '17 at 15:54

0

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.

answered Dec 30 '17 at 15:54

Tomasz Bubała

2,093
1
11
18

I tested with this option, but the result is not stable. the onload fucntion is sometimes not activated. – Hank Dec 31 '17 at 08:18
can you provide an example? – Tomasz Bubała Dec 31 '17 at 10:29
@Hank it seems to work better then listening for the `loaded` event. Check out the logs: window.onload [here](https://jsfiddle.net/zgkykgcw/), and a-frame's `loaded` event [here](https://jsfiddle.net/kz3n60qd/1/), I've used a 10k x 3k image so it could load a sec – Piotr Adam Milewski Dec 31 '17 at 15:14

score 0 · Answer 3 · answered Oct 01 '22 at 02:54

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)
   }
})());

set a loading animation with a-frame

3 Answers3

Linked