Code Playground

* {
	 box-sizing: border-box;
}
 html, body {
	 width: 100%;
	 height: 100%;
}
 body {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 background: #2a2c2e;
}
 .circles {
	 width: 50vmin;
	 height: 50vmin;
	 position: relative;
	 perspective: 50000px;
	 color: #61dafb;
}
 .circles span {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 display: block;
	 width: 18.4%;
	 height: 18.4%;
	 border-radius: 100%;
	 background: currentColor;
}
 .circles div {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 border-left: 2vmin solid;
	 border-top: 2vmin solid transparent;
	 border-radius: 100%;
}
 .circles div:nth-child(1) {
	 animation: anim-1 1s linear infinite;
}
 .circles div:nth-child(2) {
	 animation: anim-2 1s linear infinite;
}
 .circles div:nth-child(3) {
	 animation: anim-3 1s linear infinite;
}
 @keyframes anim-1 {
	 from {
		 transform: rotateZ(120deg) rotateX(66deg) rotateZ(0deg);
	}
	 to {
		 transform: rotateZ(120deg) rotateX(333deg) rotateZ(360deg);
	}
}
 @keyframes anim-2 {
	 from {
		 transform: rotateZ(240deg) rotateX(66deg) rotateZ(0deg);
	}
	 to {
		 transform: rotateZ(240deg) rotateX(333deg) rotateZ(360deg);
	}
}
 @keyframes anim-3 {
	 from {
		 transform: rotateZ(360deg) rotateX(66deg) rotateZ(0deg);
	}
	 to {
		 transform: rotateZ(360deg) rotateX(333deg) rotateZ(360deg);
	}
}

Frontend Forever App