Over the past couple of years, our development team have had a lot of fun, experimenting more and more with new technologies to create 3D websites, and build adventurous concepts for visitors to play with.

We’ve become huge fans of both the three.js and A-Frame libraries, which help us do some pretty cool things for our clients, such as building vast shareable interactive three-dimensional environments that can be explored through the web browser and via virtual reality headsets.

We decided to contribute to the online community by writing a simple HTML5 progress-based loader.

Written using stand-alone JavaScript (Vanilla JS) with no dependencies, and tapping into the potential of the HTML5 programming language, our code shows a dynamic loading screen while the environment is built in the background as the web page loads.

Planet Voodoo HTML5 Progress-based Loader On GitHub
Planet Voodoo HTML5 Progress-based Loader Example

Loading screens serve to inform (and in some cases entertain) the visitor while larger assets in 3D websites are loading, such as 3D models, mp3 audio files and images.

We created this simple script due to the novelty of A-frame, and the lack of simple, easy to implement progress-based HTML5 loaders available to developers online.

You can see the project over on GitHub, and if you’re a developer who has used the script for your commercial or personal project – we hope that it has been useful to you!

Additionally, if you’d like to add anything to our work and improve what we’ve done so far, feel free.

It’s a work in progress which can undoubtedly be improved and remixed by other talented programmers from the wider community. We’d love to see what you do with it.

GitHub link: click here for the project