Create an ELEMENTOR preloader with Lottie files in just minutes

Learn how to create a great-looking ELEMENTOR preloader using lottie files. You can have this up and running before the end of the day!

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

<style>
  #preloader {
    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 ease; /* change 0.3s to increase or decrease the transition time */
    opacity: 1;
    z-index: 9999;
  }
</style>

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

<script>
  window.addEventListener("load", () => {
    const preloader = document.getElementById("preloader");
    preloader.style.transition = "opacity 0.3s ease"; //change 0.3s to increase or decrease transition time
    setTimeout(() => {
      preloader.style.opacity = "0";
      setTimeout(() => {
        preloader.style.display = "none";
      }, 2500); //change 2500 to increase or decrease the total time the preloader plays
    }, 2500); //change 2500 to increase or decrease the total time the preloader plays
  });

  lottie.loadAnimation({
    container: document.getElementById("preloader-lottie"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://lottie.host/a9418563-6e43-4cd2-a33b-578d4de46011/mclvqnTJnL.json", //this is the URL of the lottie file you want to use
    rendererSettings: {
      progressiveLoad: false
    },
    events: {
      complete: () => console.log('Preloader works!'),
      error: (e) => console.error(e)
    }
  });
</script>