cesarzigma
8/30/2013 - 10:58 PM

Preloader CSS

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); }
}