Figure 8 Loader

Based on Temani Afif's loader tutorial. This figure-8 pattern is a valid solution to the three-body problem discovered by Chenciner and Montgomery. But I am bad at math now, so I just simulated an Eight Curve ^^'

.loader {
	--d: radial-gradient(farthest-side, currentColor 90%, #0000);
	font-size: 1.25rem;
	margin: 1em auto;
	color: darkblue;
	width: 5em;
	height: 2.5em;
	background-image: var(--d), var(--d), var(--d);
	background-size: 1em 1em;
	background-repeat: no-repeat;
	animation: m 2.5s infinite;
}

@keyframes m {
	@for $i from 0 through 100 {
		#{$i}% {
		background-position:
			#{2.0 + 2.0 * math.sin(math.$pi / 50 * $i)}em #{0.75 + 1.5 * math.sin(math.$pi / 50 * $i) * math.cos(math.$pi / 50 * $i)}em,
			#{2.0 + 2.0 * math.sin(math.$pi / 50 * $i + 2 * math.$pi / 3)}em #{0.75 + 1.5 * math.sin(math.$pi / 50 * $i + 2 * math.$pi / 3) * math.cos(math.$pi / 50 * $i + 2 * math.$pi / 3)}em,
			#{2.0 + 2.0 * math.sin(math.$pi / 50 * $i + 4 * math.$pi / 3)}em #{0.75 + 1.5 * math.sin(math.$pi / 50 * $i + 4 * math.$pi / 3) * math.cos(math.$pi / 50 * $i + 4 * math.$pi / 3)}em;
		}
	}
}