#preloader {
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 11000;
position: fixed;
display: block;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(#e91327,#50030b);
}
.loader {
display: inline-flex;
flex-wrap: wrap;
width: 150px;
height: 90px;
-webkit-transform-style: preserve-3d;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 75px;
height: 75px;
background-image: none;
background-size: auto auto;
background-image: none;
-webkit-animation: move 2s ease-in-out infinite both;
animation: move 2s ease-in-out infinite both;
animation-delay: 0s;
animation-delay: 0s;
animation-delay: 0s;
background-image: url('gb.png');
background-size: 100% 100%;
}
.box:nth-child(1) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.box:nth-child(2) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
.box:nth-child(3) {
-webkit-animation-delay: -3s;
animation-delay: -3s;
}
@-webkit-keyframes move {
0%, 100% {
-webkit-transform: none;
transform: none;
}
12.5% {
-webkit-transform: translate(40px, 0);
transform: translate(40px, 0);
}
25% {
-webkit-transform: translate(80px, 0);
transform: translate(80px, 0);
}
37.5% {
-webkit-transform: translate(80px, 40px);
transform: translate(80px, 40px);
}
50% {
-webkit-transform: translate(80px, 40px);
transform: translate(80px, 40px);
}
62.5% {
-webkit-transform: translate(30px, 60px);
transform: translate(30px, 60px);
}
75% {
-webkit-transform: translate(0, 80px);
transform: translate(0, 40px);
}
87.5% {
-webkit-transform: translate(0, 40px);
transform: translate(0, 40px);
}
}
@keyframes move {
0%, 100% {
-webkit-transform: none;
transform: none;
}
12.5% {
-webkit-transform: translate(40px, 0);
transform: translate(40px, 0);
}
25% {
-webkit-transform: translate(80px, 0);
transform: translate(80px, 0);
}
37.5% {
-webkit-transform: translate(80px, 40px);
transform: translate(80px, 40px);
}
50% {
-webkit-transform: translate(80px, 80px);
transform: translate(80px, 80px);
}
62.5% {
-webkit-transform: translate(40px, 80px);
transform: translate(40px, 80px);
}
75% {
-webkit-transform: translate(0, 80px);
transform: translate(0, 80px);
}
87.5% {
-webkit-transform: translate(0, 40px);
transform: translate(0, 40px);
}
}