Lottie files does not shows up on safari when you navigate to other url's.

[MayankSG]

I am using Lottie files as a loading screen. What I want to do is whenever the user clicks on the nav item Lottie file should show up but whenever I click on the nav bar item the Lottie file does not show up and this is specifically to ios devices. Whereas it works great on other screens android, ubuntu, windows, etc.

Can you please let me know what I am doing wrong?

[karamalie]

Could you show the implementation code

[MayankSG]

Hey @karamalie , Thanks for your response. I am doing something like this.

 <div id="loading-overlay-dark">
   <div class="d-flex justify-content-center align-items-center h-100" id="svg-container">
       <lottie-player loop= "" mode=  "normal" src= "https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"></lottie-player>
   </div>
  </div>

This is my initial hidden overlay.

$(document).on('click', 'a[href="/page_path"]', function (event) {
  var loader = $('#loading-overlay-dark');
  loader.show().find('lottie-player').get(0).play();
});

So, I am using lottie-file as the loading screen. So what happens when I click on navbar URL, my loading-overlay-dark screen shows up but lottie-file does not show up.

And If I do something like this

$(document).on('click', 'a[href="/page_path"]', function (event) {
  event.preventDefault();
  var loader = $('#loading-overlay-dark.study-plan');
  loader.show().find('lottie-player').get(0).play();
});

Animations start playing up but it stops my functionality to navigate to another page.

Also, this is the cdn I am using https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js

This is happening only on ios mobile and mac desktop devices. Whereas on Android and on the other OS platforms it's working flawlessly. Please let me know if I am doing anything wrong.

[MayankSG]

Here is the example site url :- https://lottie-player.netlify.app/

Here is the code ;- lottie_player.zip