#ogma-news-preloader {
background: #fff none repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
#ogma-news-preloader .preloader-wrapper {
left: 50%;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
} .ogma-news-wave {
margin: 40px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.ogma-news-wave .og-rect {
background-color: #E53935;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: ogma-news-waveStretchDelay 1.2s infinite ease-in-out;
animation: ogma-news-waveStretchDelay 1.2s infinite ease-in-out;
}
.ogma-news-wave .og-rect1 {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.ogma-news-wave .og-rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.ogma-news-wave .og-rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.ogma-news-wave .og-rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.ogma-news-wave .og-rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes ogma-news-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes ogma-news-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
} .ogma-news-three-bounce {
margin: 40px auto;
width: 80px;
text-align: center;
}
.ogma-news-three-bounce .og-child {
width: 20px;
height: 20px;
background-color: #E53935;
border-radius: 100%;
display: inline-block;
-webkit-animation: ogma-news-three-bounce 1.4s ease-in-out 0s infinite both;
animation: ogma-news-three-bounce 1.4s ease-in-out 0s infinite both;
}
.ogma-news-three-bounce .og-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.ogma-news-three-bounce .og-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes ogma-news-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes ogma-news-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
} .ogma-news-folding-cube {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.ogma-news-folding-cube .og-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.ogma-news-folding-cube .og-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #E53935;
-webkit-animation: og-foldCubeAngle 2.4s infinite linear both;
animation: og-foldCubeAngle 2.4s infinite linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.ogma-news-folding-cube .og-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.ogma-news-folding-cube .og-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.ogma-news-folding-cube .og-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.ogma-news-folding-cube .og-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.ogma-news-folding-cube .og-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.ogma-news-folding-cube .og-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
@-webkit-keyframes og-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
@keyframes og-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%, 75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%, 100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}