.spinloader {
	position: relative;
	height: 9px;
	width: 0;
	margin: 0 12px;
	display: inline-block;
}

.spinloader {
	display: none;
}

.spinloader>i {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	border-left-style: solid;
	border-left-width: 3px;
	border-radius: 5px 0 0 12px;

	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	animation-timing-function: linear;
}

.spinloader>i:first-child {
/*
	border-left-color:  rgba(0, 128, 255, .5);
*/
	border-left-color: #01A0DA;

	-webkit-animation-name: spin1;
	-moz-animation-name: spin1;
	-ms-animation-name: spin1;
	-o-animation-name: spin1;
	animation-name: spin1;
	-webkit-animation-duration: 1.2s;
	-moz-animation-duration: 1.2s;
	-o-animation-duration: 1.2s;
	animation-duration: 1.2s;
}

.btn .spinloader>i {
	border-left-color: white;
}

.well>.header>.spinloader
{
	top:5px;
}

.spinloader>.spin2 {
	border-left-color: rgba(245, 65, 65, 0.5);
	-webkit-animation-name: spin2;
	-moz-animation-name: spin2;
	-ms-animation-name: spin2;
	-o-animation-name: spin2;
	animation-name: spin2;
	-webkit-animation-duration: 1.6s;
	-moz-animation-duration: 1.6s;
	-o-animation-duration: 1.6s;
	animation-duration: 1.6s;
}

.spinloader>.spin3 {
	border-left-color: rgba(255, 133, 0, 0.5);
	-webkit-animation-name: spin3;
	-moz-animation-name: spin3;
	-ms-animation-name: spin3;
	-o-animation-name: spin3;
	animation-name: spin3;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-o-animation-duration: 2s;
	animation-duration: 2s;
}

.spinloader>.spin4 {
	border-left-color: rgba(0, 170, 0, 0.5);
	-webkit-animation-name: spin4;
	-moz-animation-name: spin4;
	-ms-animation-name: spin4;
	-o-animation-name: spin4;
	animation-name: spin4;
	-webkit-animation-duration: 2.4s;
	-moz-animation-duration: 2.4s;
	-o-animation-duration: 2.4s;
	animation-duration: 2.4s;
}

.spinloader>.spin2, .spinloader>.spin4
{
	border-radius: 12px 0 0 5px;
}

@keyframes spin1 {
 from {
    -webkit-transform: rotate(0deg);
   	-moz-transform: rotate(0deg);
   	-o-transform: rotate(0deg);
   	-ms-transform: rotate(0deg);
   	transform: rotate(0deg);
 }
 to {
    -webkit-transform: rotate(360deg);
   	-moz-transform: rotate(360deg);
   	-o-transform: rotate(360deg);
   	-ms-transform: rotate(360deg);
   	transform: rotate(360deg);
 }

}

@-moz-keyframes spin1 {
 from {
   -moz-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -moz-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-webkit-keyframes "spin1" {
 from {
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-ms-keyframes spin1 {
 from {
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -ms-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@-o-keyframes "spin1" {
 from {
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
 }
 to {
   -o-transform: rotate(360deg);
   transform: rotate(360deg);
 }

}

@keyframes spin2 {
 from {
    -webkit-transform: rotate(90deg);
   	-moz-transform: rotate(90deg);
   	-o-transform: rotate(90deg);
   	-ms-transform: rotate(90deg);
   	transform: rotate(90deg);
 }
 to {
    -webkit-transform: rotate(-270deg);
   	-moz-transform: rotate(-270deg);
   	-o-transform: rotate(-270deg);
   	-ms-transform: rotate(-270deg);
   	transform: rotate(-270deg);
 }

}

@-moz-keyframes spin2 {
 from {
   -moz-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 to {
   -moz-transform: rotate(-270deg);
   transform: rotate(-270deg);
 }

}

@-webkit-keyframes "spin2" {
 from {
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 to {
   -webkit-transform: rotate(-270deg);
   transform: rotate(-270deg);
 }

}

@-ms-keyframes spin2 {
 from {
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 to {
   -ms-transform: rotate(-270deg);
   transform: rotate(-270deg);
 }

}

@-o-keyframes "spin2" {
 from {
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 to {
   -o-transform: rotate(-270deg);
   transform: rotate(-270deg);
 }

}

@keyframes spin3 {
 from {
    -webkit-transform: rotate(-180deg);
   	-moz-transform: rotate(-180deg);
   	-o-transform: rotate(-180deg);
   	-ms-transform: rotate(-180deg);
   	transform: rotate(-180deg);
 }
 to {
    -webkit-transform: rotate(180deg);
   	-moz-transform: rotate(180deg);
   	-o-transform: rotate(180deg);
   	-ms-transform: rotate(180deg);
   	transform: rotate(180deg);
 }

}

@-moz-keyframes spin3 {
 from {
   -moz-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
 to {
   -moz-transform: rotate(180deg);
   transform: rotate(180deg);
 }

}

@-webkit-keyframes "spin3" {
 from {
   -webkit-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
 to {
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }

}

@-ms-keyframes spin3 {
 from {
   -ms-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
 to {
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
 }

}

@-o-keyframes "spin3" {
 from {
   -o-transform: rotate(-180deg);
   transform: rotate(-180deg);
 }
 to {
   -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }

}

@keyframes spin4 {
 from {
    -webkit-transform: rotate(270deg);
   	-moz-transform: rotate(270deg);
   	-o-transform: rotate(270deg);
   	-ms-transform: rotate(270deg);
   	transform: rotate(270deg);
 }
 to {
    -webkit-transform: rotate(-90deg);
   	-moz-transform: rotate(-90deg);
   	-o-transform: rotate(-90deg);
   	-ms-transform: rotate(-90deg);
   	transform: rotate(-90deg);
 }

}

@-moz-keyframes spin4 {
 from {
   -moz-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 to {
   -moz-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }

}

@-webkit-keyframes "spin4" {
 from {
   -webkit-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 to {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }

}

@-ms-keyframes spin4 {
 from {
   -ms-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 to {
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }

}

@-o-keyframes "spin4" {
 from {
   -o-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 to {
   -o-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }

}