<div id="preloader" class="preloader-container">
  <div class="animation">
    <div class="player">
      <lottie-player src="https://assets10.lottiefiles.com/private_files/lf30_k985zjll.json" background="transparent" style="width: 300px; height: 300px;" speed="1" autoplay></lottie-player>
    </div>
    <a id="skip">Skip</a>
  </div>
</div>

.preloader-container {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: scroll;
  position: fixed;
  z-index: 9000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #f1f1f2;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  overflow: hidden;
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

.preloader-container .animation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.preloader-container .animation #skip {
  color: #20495a;
  cursor: pointer;
  font-family: montserrat, sans-serif;
  font-size: 1.75em;
  position: absolute;
  margin: 0 auto;
  bottom: 20vh;
}

.hidden {
  display: none;
}

.visuallyhidden {
  opacity: 0;
}

let box = document.querySelector("#preloader"),
  btn = document.querySelector("#skip");

function fadeOut() {
  box.classList.add("visuallyhidden");
  box.addEventListener(
    "transitionend",
    function (e) {
      box.classList.add("hidden");
    },
    {
      capture: false,
      once: true,
      passive: false
    }
  );
}

btn.addEventListener("click", fadeOut, false);
setTimeout(fadeOut, 6000);