csspin/less/_boxes.less

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

/*Boxes Spinner*/
.cp-boxes:before{
	.bounding-box(@boxSize/2, @boxSize/2);
	content: " ";
	background: @secondColor;
	position: absolute;
	top: (@boxSize/8*2);
	left: 0;
	animation: cp-boxes-animate-before @speed3x ease-in-out infinite;
}
.cp-boxes:after{
	.bounding-box(@boxSize/2, @boxSize/2);
	content: " ";
	background: @secondColor;
	position: absolute;
	top: (@boxSize/8*2);
	right: 0;
	animation: cp-boxes-animate-after @speed3x ease-in-out infinite;
}

/*Boxes Spinner Animation*/
@keyframes cp-boxes-animate-before{
	0%{
		transform: translateX(-@boxSize/2) rotate(45deg);
	}	
	50%{
		transform: translateX(-@boxSize/6) rotate(225deg);
	}
	100%{
		transform: translateX(-@boxSize/2) rotate(45deg);
	}
}

@keyframes cp-boxes-animate-after{
	0%{
		transform: translateX(@boxSize/2) rotate(45deg);
	}	
	50%{
		transform: translateX(@boxSize/6) rotate(-225deg);
	}
	100%{
		transform: translateX(@boxSize/2) rotate(45deg);
	}
}