#ogma-blog-preloader {
background: #fff none repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 99999;
}
#ogma-blog-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-blog-wave {
margin: 40px auto;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.ogma-blog-wave .og-rect {
background-color: #FF376C;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: ogma-blog-waveStretchDelay 1.2s infinite ease-in-out;
animation: ogma-blog-waveStretchDelay 1.2s infinite ease-in-out;
}
.ogma-blog-wave .og-rect1 {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
.ogma-blog-wave .og-rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.ogma-blog-wave .og-rect3 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
.ogma-blog-wave .og-rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.ogma-blog-wave .og-rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes ogma-blog-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes ogma-blog-waveStretchDelay {
0%, 40%, 100% {
-webkit-transform: scaleY(0.4);
transform: scaleY(0.4);
}
20% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
} .ogma-blog-three-bounce {
margin: 40px auto;
width: 80px;
text-align: center;
}
.ogma-blog-three-bounce .og-child {
width: 20px;
height: 20px;
background-color: #FF376C;
border-radius: 100%;
display: inline-block;
-webkit-animation: ogma-blog-three-bounce 1.4s ease-in-out 0s infinite both;
animation: ogma-blog-three-bounce 1.4s ease-in-out 0s infinite both;
}
.ogma-blog-three-bounce .og-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.ogma-blog-three-bounce .og-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes ogma-blog-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes ogma-blog-three-bounce {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
} .ogma-blog-folding-cube {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative;
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.ogma-blog-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-blog-folding-cube .og-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #FF376C;
-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-blog-folding-cube .og-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.ogma-blog-folding-cube .og-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.ogma-blog-folding-cube .og-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.ogma-blog-folding-cube .og-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.ogma-blog-folding-cube .og-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.ogma-blog-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;
}
} @keyframes ogma-blog-ball {
0%, 100% {
animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.55)
}
0% {
transform: translate(0, 0)
}
50% {
transform: translate(0, 50px);
animation-timing-function: cubic-bezier(0, 0.45, 0.55, 0.9);
}
100% {
transform: translate(0, 0);
}
}
.ogma-blog-ball div {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: #333333;
left: -15px;
top: -15px;
animation: ogma-blog-ball 1s linear infinite;
}