Preloader einbauen

<!-- Code in fe_page nach oeffnedem body tag -->
<div id="overlayer"></div>
<span class="loadercts">
  <span class="loader-innercts"></span>
</span>

<script>
// Seitenlayouts eigener JavaScript-Code
$(window).load(function() {
	$(".loadercts").delay(300).fadeOut("slow");
  $("#overlayer").delay(300).fadeOut("slow");
})
</script>

/*PRELOADING --- Css in custom.css */

body {
    position: relative;
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}

#overlayer {
  width:100%;
  height:100%;  
  position:absolute;
  z-index:1;
  background:#fff;
  z-index: 9999999;
}
.loadercts {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: absolute;
  z-index:3;
  border: 4px solid #0096d9;
  top: 50vh;
  left: 50%;
  animation: loader 2s infinite ease;
  z-index: 99999999;
}

.loader-innercts {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #0096d9;
  animation: loader-inner 2s infinite ease-in;
  z-index: 999999999;
}