Preloader CSS
/**
*
* Preloader
*
**/
.gkIsWrapper-gk_creativity.notloaded .gkIsLoader {
-webkit-animation-name: gkistimer;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: gkistimer;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: gkistimer;
animation-duration: 0.75s;
animation-iteration-count: infinite;
animation-timing-function: linear;
border: 2px solid #fff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: "";
display: block;
height: 32px;
left: 48%;
position: relative;
top: 48%;
width: 32px;
}
.gkIsWrapper-gk_creativity.notloaded .gkIsLoader:before {
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
content: "";
display: block;
height: 2px;
left: 48%;
position: relative;
top: 48%;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
transform-origin: 0 50%;
width: 10px;
}
.gkLoadMore:hover .gkLoader {
border-color: #fff;
}
.gkLoadMore:hover .gkLoader:before {
background: #fff;
}
@-webkit-keyframes gkistimer {
from { -webkit-transform: scale(1.0) rotateZ(0deg); }
50% { -webkit-transform: scale(1.2) rotateZ(180deg); }
to { -webkit-transform: scale(1.0) rotateZ(360deg); }
}
@-moz-keyframes gkistimer {
from { -moz-transform: scale(1.0) rotateZ(0deg); }
50% { -moz-transform: scale(1.2) rotateZ(180deg); }
to { -moz-transform: scale(1.0) rotateZ(360deg); }
}
@keyframes gkistimer {
from { transform: scale(1.0) rotateZ(0deg); }
50% { transform: scale(1.2) rotateZ(180deg); }
to { transform: scale(1.0) rotateZ(360deg); }
}
/* Icon additional animations */
.icon-pulseanim {
display: inline-block;
-webkit-animation: iconpulse 0.75s infinite linear;
-moz-animation: iconpulse 0.75s infinite linear;
animation: iconpulse 0.75s infinite linear;
}
@-webkit-keyframes iconpulse {
from, to { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.4); }
}
@-moz-keyframes iconpulse {
from, to { -moz-transform: scale(1); }
50% { -moz-transform: scale(1.4); }
}
@keyframes iconpulse {
from, to { transform: scale(1); }
50% { transform: scale(1.4); }
}
.icon-flickeranim {
display: inline-block;
-webkit-animation: iconflicker 1.25s infinite linear;
-moz-animation: iconflicker 1.25s infinite linear;
animation: iconflicker 1.25s infinite linear;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}
@-webkit-keyframes iconflicker {
from, to { -webkit-transform: rotateZ(0deg); }
25% { -webkit-transform: rotateZ(-30deg); }
75% { -webkit-transform: rotateZ(30deg); }
}
@-moz-keyframes iconflicker {
from, to { -moz-transform: rotateZ(0deg); }
25% { -moz-transform: rotateZ(-30deg); }
75% { -moz-transform: rotateZ(30deg); }
}
@keyframes iconflicker {
from, to { transform: rotateZ(0deg); }
25% { transform: rotateZ(-30deg); }
75% { transform: rotateZ(30deg); }
}
.icon-wibrateanim1 {
display: inline-block;
-webkit-animation: iconwibrate1 0.25s infinite linear;
-moz-animation: iconwibrate1 0.25s infinite linear;
animation: iconwibrate1 0.25s infinite linear;
}
@-webkit-keyframes iconwibrate1 {
from, to { -webkit-transform: translateX(0); }
25% { -webkit-transform: translateX(-10px); }
75% { -webkit-transform: translateX(10px); }
}
@-moz-keyframes iconwibrate1 {
from, to { -moz-transform: rotateZ(0deg); }
25% { -moz-transform: rotateZ(-30deg); }
75% { -moz-transform: rotateZ(30deg); }
}
@keyframes iconwibrate1 {
from, to { transform: rotateZ(0deg); }
25% { transform: rotateZ(-30deg); }
75% { transform: rotateZ(30deg); }
}
.icon-wibrateanim2 {
display: inline-block;
-webkit-animation: iconwibrate2 3.5s infinite linear;
-moz-animation: iconwibrate2 3.5s infinite linear;
animation: iconwibrate2 3.5s infinite linear;
}
@-webkit-keyframes iconwibrate2 {
from, 48%, 59%, to { -webkit-transform: translateX(0); }
49%, 51%, 53%, 55%, 57% { -webkit-transform: translateX(-10px); }
50%, 52%, 54%, 56%, 58% { -webkit-transform: translateX(10px); }
}
@-moz-keyframes iconwibrate2 {
from, 48%, 59%, to { -moz-transform: translateX(0); }
49%, 51%, 53%, 55%, 57% { -moz-transform: translateX(-10px); }
50%, 52%, 54%, 56%, 58% { -moz-transform: translateX(10px); }
}
@keyframes iconwibrate2 {
from, 48%, 59%, to { transform: translateX(0); }
49%, 51%, 53%, 55%, 57% { transform: translateX(-10px); }
50%, 52%, 54%, 56%, 58% { transform: translateX(10px); }
}