Edit on
.spinner
View Compiled
$colors : snow, black;

$background : mix(nth($colors, 1), nth($colors, 2));
$size : 50vmin;
$duration : 1.5s;
$axis : 60deg;
$easing : ease-in-out;

body {
	display: flex;
	justify-content: center;
	align-items: center;
	perspective: 400px;
	background: $background;
	height: 100vh;
	overflow: hidden;
}

.spinner {
	position: relative;
	transform-style: preserve-3d;
	animation: wobble $duration*2.66 $easing infinite;
	
	&:before, 
	&:after {
		display: block;
		content: "";
		width: $size/2;
		height: $size/2;
		border: $size/4 solid;
		border-radius: 50%;
		animation: spin $duration $easing infinite both reverse;
	}
	
	&:before {
		position: absolute;
		border-color: nth($colors, 1);
	}
	&:after {
		border-color: nth($colors, 2);
		animation-delay: -$duration/2;
	}
}

@keyframes wobble {
	0%, 100% {
		transform: 
			rotateX($axis/8) 
			rotateY($axis/2);
	}
	50% {
		transform: 
			rotateX($axis/2) 
			rotateY(-$axis/2)
			rotate(180deg);
	}
}

@keyframes spin {
	0%, 100% {
		transform: translateZ(50px) rotateX($axis/5);
	}
	33% {
		transform: translateZ(-50px) scale(.4);
	}
	66% {
		transform: translateZ(-50px);
	}
}





View Compiled
Rerun