Add a preloader to your Wakanda application

Hello everyone,

While working with heavy Wakanda applications i wanted to add a preloader gif to make the user waits knowing there that the application is loading instead of having a blank page without being aware that the body is simply just hidden.

So i isolated a bit of code to make a small library preloader.js.

You’ll need the file, which can be found here

To make it works,

• Add it somewhere in your project (for example in a scripts folder at the root of your WebFolder).
• Add an image to act for the preloading image somewhere in your project (for example in an images folder at the root of your WebFolder)
• Edit your html file to be preloaded, and add

  <script type="text/javascript" src="<location_To_Preloader.js>"></script>

  before the script tag which add the Loader.js file.

• Make sure “preloader.js” is targeting the image you want to display as a preloader.

You’re done. Now try your webpage. You may find that sometimes, the other contents are visible for a microsecond, I’m looking on how to fix this, but basically you can start with this solution to display a nice preloading image for your users.

So for Wakanda studio users,

Just place the preloader.js file somewhere in your WebFolder and manually edit your webpage by switching to the source mode

And add the script before the Loader script.

Also make sure that the preloader.js finds the image file used as the preloading. By default the image is looked at the location “/images/loader.gif”. Just edit the preloader.js file to change this location.

So for me here is the structure of my WebFolder

Feel free to comment, and to enhance the code to fit your needs.

Cheers.

Tagged: Javascript, Wakanda