Preloader once

HTML

<div class="preloader">
   <div class="logo wow fadeInUp"></div>
 </div>

 <div class="page">
   CONTENT
 </div>

CSS

.preloader {
   position: fixed;
   z-index: 999;
   width: 100%;
   height: 100%;
   background: #000;
   display: flex;
   justify-content: center;
   align-items: center;
   top: 0;
   left: 0;
 }

 .logo {
   width: 200px;
   height: 100px;
   background: red;
   transition: .5s ease-in-out;
 }

 .ready {
   opacity: 0;
   transform: translateY(-20px);
 }

JavaScript

$(window).load(function() {
    if (!window.sessionStorage.getItem('preloaderdone')) {
      $(".logo").delay(1000).queue(function(next) {
        $(this).addClass("ready");
        next();
      });
      $(".preloader").delay(2000).slideUp(400, "swing");
      window.sessionStorage.setItem('preloaderdone', true);
    } else {
      $('.preloader').remove();
    }
  });