csspin/less/_heart.less

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

/*Heart Spinner*/
.cp-heart{
	animation: cp-heart-animate @speed2x ease-in-out infinite;
}

.cp-heart:before{
	border-radius: @boxSize/4 @boxSize/4 0 0;
	content: " ";
	.bounding-box(@boxSize/2, @boxSize/4*3-1);
	background-color: @thirdColor;
	transform: rotate(-45deg);
	position: absolute;
	top: 0;
	left: @boxSize/6;
}

.cp-heart:after{
	border-radius: @boxSize/4 @boxSize/4 0 0;
	content: " ";
	.bounding-box(@boxSize/2, @boxSize/4*3-1);
	background-color: @thirdColor;
	transform: rotate(45deg);
	position: absolute;
	top: 0;
	right: @boxSize/6;
}

/*Heart Spinner Animation*/
@keyframes cp-heart-animate{
  0% {
    transform: scale(.9);
    transform-origin: center;
  }
  15%{
    transform: scale(1.4);
    transform-origin: center;
  }
  30%{
    transform: scale(.9);
    transform-origin: center;
  }
  45%{
    transform: scale(1.4);
    transform-origin: center;
  }
  60%, 100%{
    transform: scale(.9);
    transform-origin: center;
  }
}