<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie.min.js" type="text/javascript"></script>

<style>
  #loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    transition: opacity 0.3s;
  }
	
</style>

<div id="loader">
<div id="lottie-loader"></div>
</div>

<script>
  window.addEventListener("load", function() {
    const loader = document.getElementById("loader");
    setTimeout(function() {
      loader.style.opacity = "0";
      setTimeout(function() {
        loader.style.display = "none";
      }, 3500);
    }, 3500);
  });

  lottie.loadAnimation({
    container: document.getElementById("lottie-loader"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://assets9.lottiefiles.com/packages/lf20_wo8d6jev.json",
    rendererSettings: {
      progressiveLoad: false
    },
    animationData: null,
    renderer: 'canvas',
    images: null,
    events: {
      complete: function() {console.log('Animation Loaded')},
      error: function(e) {console.error(e)}
    }
  });
</script>