<!-- Начало:Preloader -->
<div id="preloader">
  <div id="preloader-lines">
  <div id="preloader-lines__mask"></div>
  </div>
</div>
<script>
  jQuery(function($) {
  $(window).load(function() {
  $("#preloader").fadeOut(700);
  };);
  };);
</script>
<style>
  /* Preloader */
  #preloader {
  background-color: #123;
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 11000;
  }
  #preloader-lines {
  width: 300px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f25;
  }
  #preloader-lines::before,
  #preloader-lines::after {
  content: '';
  width: 75%;
  height: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f25;
  animation: sub-lines 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite;
  }
  #preloader-lines::before {
  top: -20px;
  }
  #preloader-lines::after {
  bottom: -20px;
  }
  #preloader-lines__mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 20;
  background-color: #123;
  animation: mask 4s cubic-bezier(0.25, 0.65, 1, 0.85) infinite;
  }
  @keyframes mask {
  0% {
  transform: scale(1, 1);
  }
  25% {
  transform: scale(0, 1);
  }
  75% {
  transform: scale(0, 1);
  }
  100% {
  transform: scale(1, 1);
  }
  }
  @keyframes sub-lines {
  0% {
  transform: translateX(-50%) scale(0, 1);
  }
  25% {
  transform: translateX(-50%) scale(0, 1);
  }
  50% {
  transform: translateX(-50%) scale(1, 1);
  }
  75% {
  transform: translateX(-50%) scale(0, 1);
  }
  100% {
  transform: translateX(-50%) scale(0, 1);
  }
  }
</style>
<!-- Конец:Preloader -->