HTML, CSS, javascript, PHP

Предзагрузчик страницы скрывает содержимое страницы пока не загрузятся все CSS-стили.

HTML-код:

<!-- Preloader -->
<div id="preloader">
	<div class="preloader">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<!-- /Preloader -->

JS-код:

jQuery(document).ready(function(jQuery) {
	// Preloader
	jQuery(window).on('load', function() {
		jQuery("#preloader").delay(600).fadeOut();
	});
});

CSS-код:

/*------------------------------------*\
 Preloader
\*------------------------------------*/

#preloader {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #FFF;
    z-index: 99999;
}

.preloader {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
 -webkit-animation: preload-rotate 10s linear infinite;
         animation: preload-rotate 10s linear infinite;
}
.preloader span {
 display: inline-block;
 width: 30px;
 height: 30px;
 background-color: #004;
 position: absolute;
 -webkit-transform: scale(0);
     -ms-transform: scale(0);
         transform: scale(0);
}

.preloader span:nth-child(1) {
 top: 0;
 left: 0;
 -webkit-animation: 1s preload-scale ease-in-out infinite;
         animation: 1s preload-scale ease-in-out infinite;
}
.preloader span:nth-child(2) {
 top: 0;
 right: 0;
 -webkit-animation: 1s preload-scale 0.06s ease-in-out infinite;
         animation: 1s preload-scale 0.06s ease-in-out infinite;
}
.preloader span:nth-child(3) {
 bottom: 0;
 -webkit-animation: 1s preload-scale 0.11s ease-in-out infinite;
         animation: 1s preload-scale 0.11s ease-in-out infinite;
}
.preloader span:nth-child(4) {
 bottom: 0;
 right: 0;
 -webkit-animation: 1s preload-scale 0.17s ease-in-out infinite;
         animation: 1s preload-scale 0.17s ease-in-out infinite;
}

@-webkit-keyframes preload-rotate {
 0% {
  -webkit-transform:translate(-50%, -50%) rotate(0deg);
          transform:translate(-50%, -50%) rotate(0deg);
 }
 100% {
  -webkit-transform:translate(-50%, -50%) rotate(360deg);
          transform:translate(-50%, -50%) rotate(360deg);
 }
}

@keyframes preload-rotate {
 0% {
  -webkit-transform:translate(-50%, -50%) rotate(0deg);
          transform:translate(-50%, -50%) rotate(0deg);
 }
 100% {
  -webkit-transform:translate(-50%, -50%) rotate(360deg);
          transform:translate(-50%, -50%) rotate(360deg);
 }
}

@-webkit-keyframes preload-scale {
 0% {
  -webkit-transform: scale(0);
          transform: scale(0);
 }
 40% {
  -webkit-transform: scale(1);
          transform: scale(1);
 }
 80% {
  -webkit-transform: scale(0);
          transform: scale(0);
 }
 100% {
  -webkit-transform: scale(0);
          transform: scale(0);
 }
}

@keyframes preload-scale {
 0% {
  -webkit-transform: scale(0);
          transform: scale(0);
 }
 40% {
  -webkit-transform: scale(1);
          transform: scale(1);
 }
 80% {
  -webkit-transform: scale(0);
          transform: scale(0);
 }
 100% {
  -webkit-transform: scale(0);
          transform: scale(0);
 }