Как сделать прелоадер для сайта?

$(window).on('load', function() { 
  $('.preloader').delay(2500).fadeOut('slow'); 
});

* { 
  margin: 0; 
  padding: 0; 
} 
 
.preloader { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(200, 200, 0, 1); 
  z-index: 200; 
} 
 
.items { 
  width: 140px; 
  height: 40px; 
  padding: 10px; 
  display: flex; 
  justify-content: space-around; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
} 
 
.item { 
  width: 20px; 
  height: 20px; 
  border-radius: 50% 
} 
 
.item:first-child { 
  background: blue; 
  animation: col1 .5s linear infinite; 
  animation-duration: .3s; 
} 
 
.item:nth-child(2) { 
  background: yellow; 
  animation: col2 .5s linear infinite; 
  animation-duration: .4s; 
} 
 
.item:nth-child(3) { 
  background: black; 
  animation: col3 .5s linear infinite; 
  animation-duration: .5s; 
} 
 
.item:nth-child(4) { 
  background: pink; 
  animation: col4 .5s linear infinite; 
  animation-duration: .6s; 
} 
 
.item:nth-child(5) { 
  background: green; 
  animation: col5 .5s linear infinite; 
  animation-duration: .7s; 
} 
 
.item:nth-child(6) { 
  background: violet; 
  animation: col6 .5s linear infinite; 
  animation-duration: .8s; 
} 
 
@keyframes col1 { 
  100% { 
    transform: scale(1.2); 
  } 
} 
 
@keyframes col2 { 
  100% { 
    transform: scale(1.2); 
  } 
} 
 
@keyframes col3 { 
  100% { 
    transform: scale(1.2); 
  } 
} 
 
@keyframes col4 { 
  100% { 
    transform: scale(1.2); 
  } 
} 
 
@keyframes col5 { 
  100% { 
    transform: scale(1.2); 
  } 
} 
 
@keyframes col6 { 
  100% { 
    transform: scale(1.2); 
  } 
} 
 
.wrapper{ 
  position: relative; 
  padding:0 30px; 
}

<div class="preloader"> 
  <div class="items"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
  </div> 
</div> 
 
<div class="wrapper"> 
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa inventore, deleniti excepturi porro dicta, doloribus quisquam sequi quod ab reprehenderit assumenda? Voluptatibus accusantium aliquam magnam. Praesentium dolore, possimus blanditiis perferendis 
    sit labore incidunt dolores mollitia odio vitae fuga ipsa corporis alias. Amet laboriosam porro et quod. Dolor ullam asperiores voluptatum, alias animi suscipit vel enim ducimus saepe debitis earum natus rerum dicta dolorum hic atque. Voluptate facilis, 
    tempore incidunt minus veniam explicabo aut. Beatae assumenda iure omnis nisi quae at, quisquam porro sunt temporibus sint praesentium! Voluptatum debitis optio ipsum labore nostrum, aperiam ex consequatur laudantium facilis. Dolor dolorum quia, ullam 
    earum, architecto, voluptate accusamus ratione beatae et at a explicabo! Sed, animi nisi. Eos amet atque, quo sit molestiae illo maxime numquam, ipsam quibusdam natus veritatis nemo obcaecati eius voluptate doloremque deleniti, asperiores deserunt! 
    Sequi consectetur rem dolore aliquam optio? Voluptate exercitationem hic eaque consequatur corrupti atque distinctio ratione, veritatis aut id? Error incidunt repellendus eveniet accusamus nihil, culpa dolorum. Quo suscipit doloremque recusandae maiores 
    aliquam vel alias deserunt animi saepe, aperiam cum voluptatibus! Aliquid accusantium eos eaque provident, natus dolores obcaecati fuga illum soluta veniam repellat officia, cupiditate recusandae consequatur sint sed alias possimus dolor beatae! Amet 
    impedit excepturi veritatis illo? Quisquam ea praesentium aspernatur alias corrupti itaque rem aliquam modi? Animi, ipsum nisi. Officiis quam est molestiae? Molestiae placeat voluptas incidunt. Facilis id neque quasi labore, esse optio fugit rerum 
    doloribus voluptas quo provident sunt eligendi magni vitae assumenda animi eos aspernatur! Excepturi odit quasi dicta eos ex, ratione ipsum aspernatur quos, voluptates alias fuga eum quod, nisi magnam nam vitae illum. Magni saepe animi, quaerat ab 
    dolores reiciendis nihil! Enim voluptatibus ex exercitationem alias? Distinctio quia porro earum! Eius laboriosam esse minus aliquam. Quasi ab excepturi reiciendis animi modi? Voluptas adipisci minus aperiam veniam magnam. Voluptatibus.</p> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>