css loader styles to use anywhere

loader.css

.ajaxify-error {
	color: #F00;
	display: block;
	margin: 0 auto;
	max-width: 400px;
	padding: 60px 0 0 0;
	text-align: center;
	width: auto;}

/* =========================================================================
/* ====== _Global Loader Elements & Styles
/* =======================================================================*/

.loader.hide {
	display: none;
}

.loader {
	margin: 0;
	position: absolute; 
	left: 50%; 
	top: 100px;
	text-align: center;
	z-index: 10;
}

/* =========================================================================
/* ====== _Worm Crawl CSS Loader Effect
/* =======================================================================*/

.loader.worm {
	margin-left: -70px;
	text-align: center;
	width: 140px;
}

.loader.worm > div {
	background: #FFF;
	border-radius: 100%;
	display: inline-block;
	height: 15px;
	margin: 1px;
	width: 15px;
	
	/*
-webkit-animation: crawl 1.5s infinite ease-in-out;
	animation: crawl 1.5s infinite ease-in-out;
*/
	
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}


/* ===== SLOW WORM ANIMATIONS ===== */

.loader.worm.slow > div {
	-webkit-animation: crawl 1.4s infinite ease-in-out;
	animation: crawl 1.4s infinite ease-in-out;
}

.loader.worm.slow .c1 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.loader.worm.slow .c2 {
	-webkit-animation-delay: -0.80s;
	animation-delay: -0.80s;
}

.loader.worm.slow .c3 {
	-webkit-animation-delay: -0.60s;
	animation-delay: -0.60s;
}

.loader.worm.slow .c4 {
	-webkit-animation-delay: -0.40s;
	animation-delay: -0.40s;
}


/* ===== MEDIUM WORM ANIMATIONS ===== */

.loader.worm.medium > div {
	-webkit-animation: crawl 0.8s infinite ease-in-out;
	animation: crawl 0.8s infinite ease-in-out;
}

.loader.worm.medium .c1 {
	-webkit-animation-delay: -0.60s;
	animation-delay: -0.60s;
}

.loader.worm.medium .c2 {
	-webkit-animation-delay: -0.45s;
	animation-delay: -0.45s;
}

.loader.worm.medium .c3 {
	-webkit-animation-delay: -0.30s;
	animation-delay: -0.30s;
}

.loader.worm.medium .c4 {
	-webkit-animation-delay: -0.15s;
	animation-delay: -0.15s;
}


/* ===== FAST WORM ANIMATIONS ===== */

.loader.worm.fast > div {
	-webkit-animation: crawl 0.6s infinite ease-in-out;
	animation: crawl 0.6s infinite ease-in-out;
}

.loader.worm.fast .c1 {
	-webkit-animation-delay: -0.45s;
	animation-delay: -0.45s;
}

.loader.worm.fast .c2 {
	-webkit-animation-delay: -0.30s;
	animation-delay: -0.30s;
}

.loader.worm.fast .c3 {
	-webkit-animation-delay: -0.15s;
	animation-delay: -0.15s;
}

.loader.worm.fast .c4 {
	-webkit-animation-delay: -0.05s;
	animation-delay: -0.05s;
}

/* ===== WORM WEBKIT KEYFRAMES ===== */

@-webkit-keyframes crawl {

	0%, 80%, 100% { -webkit-transform: scale(0.08) }

	40% { -webkit-transform: scale(0.80) }

}

/* ===== WORM EFFECT KEYFRAMES ===== */

@keyframes crawl {

	0%, 80%, 100% { 
		-webkit-transform: scale(0.08);
		transform: scale(0.08);
	} 
	
	40% { 
		-webkit-transform: scale(0.80);
		transform: scale(0.80);
	}

}


/* =========================================================================
/* ====== _Stretch Delay CSS Loader Effect
/* =======================================================================*/

.loader.stretch {
	font-size: 10px;
	height: 50px;
	margin-left: -70px;
	width: 140px;
}

.loader.stretch > div {
	background: #FFF;
	display: inline-block;
	height: 100%;
	margin: 0 1px;
	width: 4px;
}


/* ===== SLOW STRETCH ANIMATIONS ===== */

.loader.stretch.slow > div {
	-webkit-animation: stretch 1.4s infinite ease-in-out;
	animation: stretch 1.4s infinite ease-in-out;
}

.loader.stretch.slow .c2 {
	-webkit-animation-delay: -1.2s;
	animation-delay: -1.2s;
}

.loader.stretch.slow .c3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.loader.stretch.slow .c4 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

.loader.stretch.slow .c5 {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}


/* ===== MEDIUM STRETCH ANIMATIONS ===== */

.loader.stretch.medium > div {
	-webkit-animation: stretch 1.1s infinite ease-in-out;
	animation: stretch 1.1s infinite ease-in-out;
}

.loader.stretch.medium .c2 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.loader.stretch.medium .c3 {
	-webkit-animation-delay: -0.90s;
	animation-delay: -0.90s;
}

.loader.stretch.medium .c4 {
	-webkit-animation-delay: -0.80s;
	animation-delay: -0.80s;
}

.loader.stretch.medium .c5 {
	-webkit-animation-delay: -0.70s;
	animation-delay: -0.70s;
}


/* ===== FAST STRETCH ANIMATIONS ===== */

.loader.stretch.fast > div {
	-webkit-animation: stretch .80s infinite ease-in-out;
	animation: stretch .80s infinite ease-in-out;

}

.loader.stretch.fast .c2 {
	-webkit-animation-delay: -0.75s;
	animation-delay: -0.75s;
}

.loader.stretch.fast .c3 {
	-webkit-animation-delay: -0.70s;
	animation-delay: -0.70s;
}

.loader.stretch.fast .c4 {
	-webkit-animation-delay: -0.65s;
	animation-delay: -0.65s;
}

.loader.stretch.fast .c5 {
	-webkit-animation-delay: -0.60s;
	animation-delay: -0.60s;
}


/* ===== PULSE WEBKIT KEYFRAMES ===== */

@-webkit-keyframes stretch {

	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  

	20% { -webkit-transform: scaleY(0.8) }

}

@keyframes stretch {

	0%, 40%, 100% { 
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}  
	
	20% { 
		transform: scaleY(0.8);
		-webkit-transform: scaleY(0.8);
	}

}


/* =========================================================================
/* ====== _Loading Bar CSS Loader Effect
/* =======================================================================*/

.loader.bar {
	background: rgba(0, 0, 0, 0.20);
	border-radius: 9px;
	height: 20px;
	margin-left: -114px;
	padding: 0;
	width: 228px;
}

.loader.bar div {
	display: none;
}

.loader.bar .c1 {
	background-color: #33DD00;

	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.40) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0.40) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.40) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0.40) 75%, transparent 75%, transparent);
	background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.40) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0.40) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.40) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.40) 50%, rgba(255, 255, 255, 0.40) 75%, transparent 75%, transparent);

	-moz-background-size: 50px 50px;
	-ms-background-size: 50px 50px;
	background-size: 50px 50px;

	-webkit-border-radius: 25px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	border-radius: 20px;

	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(255, 255, 255, 0.25);
	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(255, 255, 255, 0.25);
	-ms-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(255, 255, 255, 0.25);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), inset 0 -1px 2px rgba(255, 255, 255, 0.25);

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.30);
	display: inline-block;
	height: 12px;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: absolute; top: 4px; left: 4px;
	width: 220px;
}

.loader.bar.slow .c1 {
	-webkit-animation: moveSlow 3s linear infinite;
	-moz-animation: moveSlow 3s linear infinite;
	-ms-animation: moveSlow 3s linear infinite;
	animation: moveSlow 3s linear infinite;	
}

.loader.bar.medium .c1 {
	-webkit-animation: moveMedium 2.5s linear infinite;
	-moz-animation: moveMedium 2.5s linear infinite;
	-ms-animation: moveMedium 2.5s linear infinite;
	animation: moveMedium 2.5s linear infinite;	
}

.loader.bar.fast .c1 {
	-webkit-animation: moveFast 2.0s linear infinite;
	-moz-animation: moveFast 2.0s linear infinite;
	-ms-animation: moveFast 2.0s linear infinite;
	animation: moveFast 2.0s linear infinite;	
}



/* ===== MOVESLOW WEBKIT, MOZ, MS, SPEC KEYFRAMES ===== */

@-webkit-keyframes moveSlow {

	0% { background-position: 0 0; }

	100% { background-position: 50px 50px; }

}

@-moz-keyframes moveSlow {

	0% { background-position: 0 0; }

	100% { background-position: 50px 50px; }

}

@-ms-keyframes moveSlow {

	0% { background-position: 0 0; }

	100% { background-position: 50px 50px; }

}

@keyframes moveSlow {

	0% { background-position: 0 0; }

	100% { background-position: 50px 50px; }

}



/* ===== MOVENORMAL WEBKIT, MOZ, MS, SPEC KEYFRAMES ===== */

@-webkit-keyframes moveMedium {

	0% { background-position: 0 0; }

	100% { background-position: 100px 100px; }

}

@-moz-keyframes moveMedium {

	0% { background-position: 0 0; }

	100% { background-position: 100px 100px; }

}

@-ms-keyframes moveMedium {

	0% { background-position: 0 0; }

	100% { background-position: 100px 100px; }

}

@keyframes moveMedium {

	0% { background-position: 0 0; }

	100% { background-position: 100px 100px; }

}


/* ===== MOVEFAST WEBKIT, MOZ, MS, SPEC KEYFRAMES ===== */

@-webkit-keyframes moveFast {

	0% { background-position: 0 0; }

	100% { background-position: 150px 150px; }

}

@-moz-keyframes moveFast {

	0% { background-position: 0 0; }

	100% { background-position: 150px 150px; }

}

@-ms-keyframes moveFast {

	0% { background-position: 0 0; }

	100% { background-position: 150px 150px; }

}

@keyframes moveFast {

	0% { background-position: 0 0; }

	100% { background-position: 150px 150px; }

}