Как сделать чтобы прелоадер прятался не раньше 5 секунд?

Question

[Алексей]

Всем привет! Как можно сделать чтобы прелоадер не прятался в течении 4 секунд загрузки сайта?

$(window).on('load', function () {
     $preloader = $('.loaderArea'),
      $loader = $preloader.find('.loader');
    $loader.fadeOut();
    $preloader.delay(350).fadeOut('slow');
  });

<div class="loaderArea">
    <div class="loader"></div>
 </div>

.loaderArea {
    background: linear-gradient(90deg, #FF4E50 10%, #F9D423 90%);
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
    right:0;
    bottom:0;
    z-index: 100000;
  }
  .loader {
    height: 40px;
    width: 40px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
    top: 50%;
    margin-top: -20px;
  }
   
  .loader:before,
  .loader:after {
    content: "";
    height: 40px;
    width: 40px;
    border: 8px solid rgba(255,255,255,.5);
    border-radius: 10px;
    position: absolute;
    top: 0;
  }
   
  .loader:before {
    animation: animate 2s infinite linear;
  }
   
  @keyframes animate {
    0% {
      transform: rotate(0) skew(0);
    }
     
    100% {
      transform: rotate(180deg) skew(360deg);
    }
  }
   
   
  .loader:after {
    animation: animate2 2s infinite linear;
  }
   
  @keyframes animate2 {
    0% {
      transform: rotate(0) skew(0);
    }
     
    100% {
      transform: rotate(-180deg) skew(-360deg);
    }
  }

Comments

[Павел]

Не?
$preloader.delay(4000).fadeOut('slow');

Или settimeout для $loader.fadeOut();

[Алексей]

Павел, Через delay он мне почему-то всю анимацию убивает, второе сейчас попробую

[Александр Вернигоров]

лучше чистый использовать js
js
window.onload = function () {
window.setTimeout(function () {
document.body.classList.add('loaded_hiding');
setTimeout(function () {
document.body.classList.add('loaded');
},500)
}, 4500);
}
css
.loaded .loaderArea {
display: none;
}

.loaded_hiding .loaderArea {
-webkit-transition: 0.3s opacity;
-o-transition: 0.3s opacity;
transition: 0.3s opacity;
opacity: 0;
}