csspin
Version:
CSS Spinners and Loaders - Modular, Customizable and Single HTML Element Code
33 lines (32 loc) • 607 B
text/less
/*Flip Spinner*/
.cp-flip{
transform-style: preserve-3d;
perspective: 10em;
}
.cp-flip:before{
.bounding-box(@boxSize, @boxSize);
background: @primaryColor;
content: " ";
position: absolute;
top: 0;
left: 0;
animation: cp-flip-animate-before @speed2x linear infinite;
}
/*Flip Spinner Animation*/
@keyframes cp-flip-animate-before{
0% {
transform: rotateY(0deg) rotateX(0deg);
}
25%{
transform: rotateY(360deg) rotateX(0deg);
}
50%{
transform: rotateY(360deg) rotateX(360deg);
}
75%{
transform: rotateY(0deg) rotateX(360deg);
}
100%{
transform: rotateY(0deg) rotateX(0deg);
}
}