SOURCE

<div class='☯'></div>

$d: 80vmin;
$f: .5;
$t: 1s;

body {
	display: flex;
  align-items: center;
  justify-content: center;
	overflow: hidden;
	height: 100vh;
	background: lightslategray;
}

.☯ {
	display: flex;
	align-items: center;
	width: $d; height: $d;
	border-radius: 50%;
	background: linear-gradient(black 50%, white 0);
	animation: r 2*$t linear infinite;
	
	&:before, &:after {
		--i: 0;
		flex: 1;
		border: solid $d/6 hsl(0, 0%, calc((1 - var(--i))*100%));
		height: $d/6;
		border-radius: 50%;
    transform-origin: calc(var(--i)*100%) 50%;
		transform: scale($f);
		background: hsl(0, 0%, calc(var(--i)*100%));
		animation: s $t ease-in-out calc(var(--i)*#{-$t}) infinite alternate;
		content: ''
	}
	
	&:after { --i: 1 }
}

@keyframes s { to { transform: scale(2 - $f) } }

@keyframes r { to { transform: rotate(1turn) } }