csspin/less/_eclipse.less

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

/*Eclipse Spinner*/
.cp-eclipse{
	.bounding-box(@boxSize/4, @boxSize/4);
	border-radius: 50%;
	background: @fourthColor;
	margin: @boxSize/4;
	animation: cp-eclipse-animate @speed3x ease-out infinite;
}
.cp-eclipse:before{
	border-radius: 50%;
	content: " ";
	.bounding-box(@boxSize, @boxSize);
	.border(@boxSize/8, @transparent, @fourthColor, @transparent, @transparent);
	position: absolute;
	top: -(@boxSize/8*3);
	left: -(@boxSize/8*3);
}
.cp-eclipse:after{
	border-radius: 50%;
	content: " ";
	.bounding-box(@boxSize, @boxSize);
	.border(@boxSize/8, @transparent, @transparent, @transparent, @fourthColor);
	position: absolute;
	top: -(@boxSize/8*3);
	right: -(@boxSize/8*3);
}

/*Eclipse Spinner Animation*/
@keyframes cp-eclipse-animate{
	0%{
		transform: rotate(0deg);
	}	
	100%{
		transform: rotate(360deg);
	}
}