Create page loading/page transition effect

Hi. I want to create a page loading/page transition effect to make it smooth. The kind of effect I want is fade out/fade in. I watched the following tutorial since they show how to create the exact effect that I want. But it looks super complicated. I wonder if there is a more simple way to do it? Thanks.

The tutorial I watched: 

My website: https://www.taniq.com/

An effect like this example? https://tuanphan3.squarespace.com/lottie-loading-one?noredirect

pass: abc

@tuanphan Hi, that one looks nice too and I've seen websites do it, but it seems to only be like a pre loader for the home page and not the rest of the website, so I kinda still prefer a fade out/fade in effect like in the tutorial. But this one also looks good and if it's not too complicated to set up I want to give it a try as well. Thank you

Have you tried copy code in video yet? I see that code is for 7.1 version.

Code I sent, I set for one page only, however if you add code to Site wide Code Injection, it should load on all pages

You can add code to Website Tools (under Not Linked) > Code Injection > Footer. Replace example lottie file with your file. Or if you want to use image/text only, let me know, I will adjust the code

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<div class="splash-wrapper">
  <lottie-player src="https://lottie.host/7134761f-9be6-42da-bb65-6ff81185617b/uEgxToPhd9.json"  background="transparent"  speed="1"  style="width: 275px; height: 275;"  loop  autoplay></lottie-player>
</div>
<style>
.splash-wrapper {
  position:fixed;
  z-index:9999;
  background-color: #000000;
  height:100vh;
  width:100vw;
  display:flex;
  flex-flow: column nowrap;
  justify-content:center;
  align-items:center;
  animation-name: slideOut;
  animation-fill-mode: forwards;
  animation-duration:.65s;
  animation-delay: 5s;
}
@keyframes slideOut {
  from {margin-left: 0vw;}
  to {margin-left: -100vw;}
}
</style>

On 11/26/2023 at 4:26 AM, tuanphan said:

Replace example lottie file with your file

Hi, sorry I did not fully understand your instruction. What kind of file should I use? Can it just be the logo of our company? And it looks like I need to upload it somewhere in order to get a link for the code?

So you want to replace it with a logo, or a logo + text or a text or? We can adjust code easier

If replace logo, you can send here, we can give you logo url

3 hours ago, tuanphan said:

So you want to replace it with a logo, or a logo + text or a text or? We can adjust code easier

If replace logo, you can send here, we can give you logo url

Hi, I do want to have my company's logo on a white background. Attached is the logo.