.loader {
height: 58px;
left: 50%;
position: absolute;
transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
width: 58px;
}
.loader span {
background: rgb(255,95,21);
display: block;
height: 12px;
opacity: 0;
position: absolute;
width: 12px;
animation: load 4.6s ease-in-out infinite;
-o-animation: load 4.6s ease-in-out infinite;
-ms-animation: load 4.6s ease-in-out infinite;
-webkit-animation: load 4.6s ease-in-out infinite;
-moz-animation: load 4.6s ease-in-out infinite;
}
.loader span.block-1 {
animation-delay: 1.06s;
-o-animation-delay: 1.06s;
-ms-animation-delay: 1.06s;
-webkit-animation-delay: 1.06s;
-moz-animation-delay: 1.06s;
left: 0px;
top: 0px;
}
.loader span.block-2 {
animation-delay: 0.97s;
-o-animation-delay: 0.97s;
-ms-animation-delay: 0.97s;
-webkit-animation-delay: 0.97s;
-moz-animation-delay: 0.97s;
left: 16px;
top: 0px;
}
.loader span.block-3 {
animation-delay: 0.87s;
-o-animation-delay: 0.87s;
-ms-animation-delay: 0.87s;
-webkit-animation-delay: 0.87s;
-moz-animation-delay: 0.87s;
left: 31px;
top: 0px;
}
.loader span.block-4 {
animation-delay: 0.78s;
-o-animation-delay: 0.78s;
-ms-animation-delay: 0.78s;
-webkit-animation-delay: 0.78s;
-moz-animation-delay: 0.78s;
left: 47px;
top: 0px;
}
.loader span.block-5 {
animation-delay: 0.69s;
-o-animation-delay: 0.69s;
-ms-animation-delay: 0.69s;
-webkit-animation-delay: 0.69s;
-moz-animation-delay: 0.69s;
left: 0px;
top: 16px;
}
.loader span.block-6 {
animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
left: 16px;
top: 16px;
}
.loader span.block-7 {
animation-delay: 0.51s;
-o-animation-delay: 0.51s;
-ms-animation-delay: 0.51s;
-webkit-animation-delay: 0.51s;
-moz-animation-delay: 0.51s;
left: 31px;
top: 16px;
}
.loader span.block-8 {
animation-delay: 0.41s;
-o-animation-delay: 0.41s;
-ms-animation-delay: 0.41s;
-webkit-animation-delay: 0.41s;
-moz-animation-delay: 0.41s;
left: 47px;
top: 16px;
}
.loader span.block-9 {
animation-delay: 0.32s;
-o-animation-delay: 0.32s;
-ms-animation-delay: 0.32s;
-webkit-animation-delay: 0.32s;
-moz-animation-delay: 0.32s;
left: 0px;
top: 31px;
}
.loader span.block-10 {
animation-delay: 0.23s;
-o-animation-delay: 0.23s;
-ms-animation-delay: 0.23s;
-webkit-animation-delay: 0.23s;
-moz-animation-delay: 0.23s;
left: 16px;
top: 31px;
}
.loader span.block-11 {
animation-delay: 0.14s;
-o-animation-delay: 0.14s;
-ms-animation-delay: 0.14s;
-webkit-animation-delay: 0.14s;
-moz-animation-delay: 0.14s;
left: 31px;
top: 31px;
}
.loader span.block-12 {
animation-delay: 0.05s;
-o-animation-delay: 0.05s;
-ms-animation-delay: 0.05s;
-webkit-animation-delay: 0.05s;
-moz-animation-delay: 0.05s;
left: 47px;
top: 31px;
}
.loader span.block-13 {
animation-delay: -0.05s;
-o-animation-delay: -0.05s;
-ms-animation-delay: -0.05s;
-webkit-animation-delay: -0.05s;
-moz-animation-delay: -0.05s;
left: 0px;
top: 47px;
}
.loader span.block-14 {
animation-delay: -0.14s;
-o-animation-delay: -0.14s;
-ms-animation-delay: -0.14s;
-webkit-animation-delay: -0.14s;
-moz-animation-delay: -0.14s;
left: 16px;
top: 47px;
}
.loader span.block-15 {
animation-delay: -0.23s;
-o-animation-delay: -0.23s;
-ms-animation-delay: -0.23s;
-webkit-animation-delay: -0.23s;
-moz-animation-delay: -0.23s;
left: 31px;
top: 47px;
}
.loader span.block-16 {
animation-delay: -0.32s;
-o-animation-delay: -0.32s;
-ms-animation-delay: -0.32s;
-webkit-animation-delay: -0.32s;
-moz-animation-delay: -0.32s;
left: 47px;
top: 47px;
}
@keyframes load {
0% {
opacity: 0;
transform: translateY(-97px);
}
15% {
opacity: 0;
transform: translateY(-97px);
}
30% {
opacity: 1;
transform: translateY(0);
}
70% {
opacity: 1;
transform: translateY(0);
}
85% {
opacity: 0;
transform: translateY(97px);
}
100% {
opacity: 0;
transform: translateY(97px);
}
}
@-o-keyframes load {
0% {
opacity: 0;
-o-transform: translateY(-97px);
}
15% {
opacity: 0;
-o-transform: translateY(-97px);
}
30% {
opacity: 1;
-o-transform: translateY(0);
}
70% {
opacity: 1;
-o-transform: translateY(0);
}
85% {
opacity: 0;
-o-transform: translateY(97px);
}
100% {
opacity: 0;
-o-transform: translateY(97px);
}
}
@-ms-keyframes load {
0% {
opacity: 0;
-ms-transform: translateY(-97px);
}
15% {
opacity: 0;
-ms-transform: translateY(-97px);
}
30% {
opacity: 1;
-ms-transform: translateY(0);
}
70% {
opacity: 1;
-ms-transform: translateY(0);
}
85% {
opacity: 0;
-ms-transform: translateY(97px);
}
100% {
opacity: 0;
-ms-transform: translateY(97px);
}
}
@-webkit-keyframes load {
0% {
opacity: 0;
-webkit-transform: translateY(-97px);
}
15% {
opacity: 0;
-webkit-transform: translateY(-97px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0);
}
70% {
opacity: 1;
-webkit-transform: translateY(0);
}
85% {
opacity: 0;
-webkit-transform: translateY(97px);
}
100% {
opacity: 0;
-webkit-transform: translateY(97px);
}
}
@-moz-keyframes load {
0% {
opacity: 0;
-moz-transform: translateY(-97px);
}
15% {
opacity: 0;
-moz-transform: translateY(-97px);
}
30% {
opacity: 1;
-moz-transform: translateY(0);
}
70% {
opacity: 1;
-moz-transform: translateY(0);
}
85% {
opacity: 0;
-moz-transform: translateY(97px);
}
100% {
opacity: 0;
-moz-transform: translateY(97px);
}
}