csspin/less/_hue.less

CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code

/*Hue Spinner*/
.cp-hue{
	.bounding-box(@boxSize/2, @boxSize/2);
	background: @primaryColor;
	border-radius: 50%;
	animation: cp-hue-animate @speed3x ease-in-out infinite;
}
.cp-hue:before{
	border-radius: 0% @boxSize/4 @boxSize/4 0%;
	content: " ";
	.bounding-box(@boxSize/4, @boxSize/2);
	background: white;
	position: absolute;
	top: 0;
	right: 0;
	animation: cp-hue-animate-before @speed3x ease-in-out infinite;
}

/*Hue Spinner Animation*/
@keyframes cp-hue-animate{
	0%{
		background: @primaryColor;
	}
	25%{
		background: @secondColor;
	}
	50%{
		background: @thirdColor;
	}
	75%{
		background: @fourthColor;
	}
	100%{
		background: @primaryColor;
	}
}

@keyframes cp-hue-animate-before{
	0%{
		transform: rotateY(0deg);
		transform-origin: left center;
		opacity: .5;
	}
	30%, 70%{
		transform: rotateY(180deg);
		transform-origin: left center;
		opacity: .2;
	}
	100%{
		transform: rotateY(0deg);
		opacity: .5;
	}
}