Содержание
HTML после открытия тега body
[php]
<!– Preloader –>
<div class="preloader"></div>
<!– Preloader end –>
[/php]
JS
[php]
/*=========================================================================
Preloader
=========================================================================*/
$(window).load(function() {
"use strict";
$(".preloader").delay(350).fadeOut(‘slow’);
});
[/php]
CSS
[php]
/*—————————————————————–*/
/* PRELOADER */
/*—————————————————————–*/
.preloader {
width: 100%;
height: 100%;
background-color: #23475B;
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
}
.preloader:before,.preloader:after {
content: "";
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
top: 50%;
}
.preloader:before {
background-color: #ed5f6b;
left: 50%;
-webkit-animation: animation_left_round 1.8s infinite ease-in-out;
animation: animation_left_round 1.8s infinite ease-in-out;
}
.preloader:after {
background-color: #FFF;
right: 50%;
-webkit-animation: animation_right_round 1.8s infinite ease-in-out;
animation: animation_right_round 1.8s infinite ease-in-out;
}
@-webkit-keyframes animation_left_round {
0%,100% {
-webkit-transform: translate3d(50%,-50%,0);
transform: translate3d(50%,-50%,0);
}
50% {
-webkit-transform: translate3d(-150%,-50%,0);
transform: translate3d(-150%,-50%,0);
}
}
@keyframes animation_left_round {
0%,100% {
-webkit-transform: translate3d(50%,-50%,0);
transform: translate3d(50%,-50%,0);
}
50% {
-webkit-transform: translate3d(-150%,-50%,0);
transform: translate3d(-150%,-50%,0);
}
}
@-webkit-keyframes animation_right_round {
0%,100% {
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
50% {
-webkit-transform: translate3d(150%,-50%,0);
transform: translate3d(150%,-50%,0);
}
}
@keyframes animation_right_round {
0%,100% {
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
50% {
-webkit-transform: translate3d(150%,-50%,0);
transform: translate3d(150%,-50%,0);
}
}
[/php]
