<span class="pie-wrap">
	<span class="pie-r"><span></span></span>
	<span class="pie-l"><span></span></span>
</span>
*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
}
body, html {
	height: 100%;
}
body {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pie-wrap {
	position: relative;
	width: 200px;
	height: 200px;
}
.pie-r,
.pie-l {
	position: absolute;
	display: block;
	width: 50%;
	height: 100%;
	top: 0;
	overflow: hidden;
}
.pie-r {
	right: 0;
}
.pie-l {
	left: 0;
}
.pie-r span,
.pie-l span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	animation-duration: 3s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	overflow: hidden;
}
.pie-r span {
	transform-origin: left;
	animation-name: rotateR;
}
.pie-l span {
	transform-origin: right;
	animation-name: rotateL;
}
.pie-r span:before,
.pie-l span:before {
	content: "";
	position: absolute;
	display: block;
	width: 200%;
	height: 100%;
	top: 0;
	border-radius: 50%;
	background: #000;
}
.pie-r span:before {
	right: 0;
}
.pie-l span:before {
	left: 0;
}



@keyframes rotateR {
	0% {
		transform: rotateZ(-180deg);
	}
	50% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(0deg);
	}
}
@keyframes rotateL {
	0% {
		transform: rotateZ(180deg);
	}
	50% {
		transform: rotateZ(180deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.