csspin/less/_skeleton.less

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

/*Skeleton Spinner*/
.cp-skeleton{
	border-radius: 50%;
	.border(@boxSize/8, @primaryColor, @transparent, @transparent, @transparent); 
	animation: cp-skeleton-animate @speed3x linear infinite;
}
.cp-skeleton:before{
	border-radius: 50%;
	content: " ";
	.bounding-box(@boxSize, @boxSize);
	.border(@boxSize/8, @transparent, @transparent, @transparent, @primaryColor);
	position: absolute;
	top: -(@boxSize/8);
	left: -(@boxSize/8);
	transform: rotateZ(-30deg);
}
.cp-skeleton:after{
	border-radius: 50%;
	content: " ";
	.bounding-box(@boxSize, @boxSize);
	.border(@boxSize/8, @transparent, @primaryColor, @transparent, @transparent);
	position: absolute;
	top: -(@boxSize/8);
	right: -(@boxSize/8);
	transform: rotateZ(30deg);
}

/*Skeleton Spinner Animation*/
@keyframes cp-skeleton-animate{
	0%{
		transform: rotate(0deg);
		opacity: 1;
	}
	50%{
		opacity: .7;
	}	
	100%{
		transform: rotate(360deg);
		opacity: 1;
	}
}