advanced loading screen library for aframe
MIT License
it's an incomplete project that is "good enough to use" (and I do already use it in almost every project I make, and it already gives me many features I've wanted for years), but don't expect every feature to work, and expect the api to change in future releases. Some config setups will produce awkward layouts because of incomplete CSS implementation that I will rewrite. All that said, it's a huge improvement on the built in load screen that adds some much needed features to A-Frame, and I use this in every project I care about already.
a-asset-item
s(1) Add loading-screen="enabled:false;"
to turn off A-Frame's default loading screen.
<a-scene
loading-screen="enabled:false;"
></a-scene>
(2) Add scripts + CSS dependencies from loader.io to the top of your doc--even before aframe, ideally
<head>
<!-- if you're using a logo, I recommend you convert it to a dataimg and store it directly in this file;
the default a-frame logo is stored in the library this way-->
<!-- scripts needed for a-load-screen.js -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/loadingio/[email protected]/dist/loading-bar.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/loadingio/[email protected]/dist/loading-bar.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/kylebakerio/[email protected]/a-load-screen.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
(3) Add a script immediately after </a-assets>
closing tag, in the body, with call window.initALoadScreen().
We add it here because we want to show the loading screen as soon as possible, and at that point we have access to everything we need to start listening.
Also, adding here means we safely execute our script and add listeners before any events fire.
THESE OPTIONS ARE ALREADY PARTIALLY OUT OF DATE, REFER TO DEFAULTS FOUND IN a-load-screen.js TO SEE OPTIONS!
<!-- these are the defaults -->
</a-assets>
<script>
// simple:
// window.initALoadScreen();
<!-- optionally, you can specify options. -->
// with full options specified, with default values shown
window.initALoadScreen({
debug: [], // can include 'log','warn','error', etc.
showLogoLoader: true,
logoURL: "https://aframe.io/aframe-school/media/img/aframe-logo.png",
logoSize: "200,200",
showBarLoaders: true,
showLoadPercent: true, // not implemented
showFileNames: true, // not complete
showFileSizes: true, // not implemented
barLoaderPreset: "rainbow", // one of: line, fan, circle, bubble, rainbow, energy, stripe, text | see https://loading.io/progress/
customLoaderAttributes: null, // see usage of this object in this script to get a clearer idea, along with docs @ https://loading.io/progress
backgroundColor: "black",
backgroundOpacity: .5,
sceneOpacity: 1,
onComplete: function() {this.hideLoader()},
// this.hideLoader() will be added and made available to you on the object
// (so: don't bind onComplete function to another context if you want access.)
// you probably always want to call this.hideLoader() eventually,
// but it's your app :)
// you could also just inject a button first if you want for audio, etc.
})
</script>
<!-- rest of your scene... -->
</html>
http://the-big-shell.glitch.me