Skip to content

How To: Adding a lottie based loader to my awe app

Jump to bottom
awe.media edited this page May 25, 2022 · 2 revisions

Adding a lottie based loader my awe app

It's easy to add a lottie based animation into the custom loader of your awe app using the web editor UI. This guide gives you a simple example of how to get started.

If you haven't enabled the Custom Branding pack please contact support [at] awe.media or you can see more about the different customization options available here.

Creating your lottie animation

Start by creating your lottie animation. Then download or save the JSON file for use in the JS section below.

Creating the HTML for your custom loader

Next login to your awe project and open the Settings and then the Project branding section. Then click on the pencil in the Full Custom Loading Screen Enabled section.

Now copy and paste this HTML snippet into the HTML panel.

<div id="custom-spinner" class="visible">
<lottie-player id="lottie_loader" mode="normal" autoplay></lottie-player>
</div>

Note that you may also want to add a loop option (e.g. add loop after autoplay).

<lottie-player id="lottie_loader" mode="normal" autoplay loop></lottie-player>

Creating the JS for your custom loader

Next copy and paste this JS snippet into the JS panel. Replace the /* paste your lottie json here */ section with the JSON for your lottie animation.

window.lottie_loaded; // setup a flag to track if lottie has been loaded
if (!window.lottie_loaded) {
  awe_boot.load_script_file(
    'https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js', // update this to your own URL or a specific version if you prefer 
    {
      success:function() {
        window.lottie_loaded=true; // set flag to true now that lottie js has loaded successfully
        const player = document.getElementById('lottie_loader'); // get the lottie_loader element
        player.load(/* paste your lottie json here */);
        // if your lottie animation sometimes jumps while playing you can uncomment the line below
        //document.getElementById('lottie_loader').shadowRoot.querySelector('svg').style.height='90vh'; // some animations may need you to adjust their height to match your layout
      },
      error:function() { 
        // handle errors loading lottie js if you need
      }
    }
  );
}
(async function() {
  await awe.on_state('ready'); // wait for the ready event
  awe.dom('#custom-spinner').fade_out(); // fade out your custom loader to reveal your app
})();

Creating the CSS for your custom loader

Next copy and paste this CSS into the CSS panel. You can adjust the styles to position and scale the elements as you need.

#custom-spinner {
  background: #F00;
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  z-index: 1; 
  opacity: 0; 
  transition: opacity 1s; 
  pointer-events: none;
  display: flex;
  flex-flow: column;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 2em;
  box-sizing: border-box;
}
#custom-spinner.visible {
  opacity: 1;
  visibility: visible;
}
#lottie_loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Save and preview

Now click the Update button. Then load your awe project and you will now see your lottie animation displayed as your custom loader.

This should give you a good idea of how easy it is to add a lottie based loader to your awe app.

Clone this wiki locally