.load
	.a2d
		- for(let i = 0; i < 2; i++)
			div(class='🔴' style=`--i: ${i}`)
View Compiled
$c: #00fffc, #fc00ff, #fffc00;
$d: 2.5em;
$g: .1*$d;
$b: .5*$d;
$r: .5*($d + $b) + $g;
$p: 25%;
$k: .35;
$t: 1.5s;
$f: .25;
$ease0: cubic-bezier(1 - $f, $f, 1 - $f, $f);
$ease1: cubic-bezier($f, 1 - $f, $f, 1 - $f);

@property --k0 {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

@property --k1 {
	syntax: '<number>';
	initial-value: 0;
	inherits: true
}

@property --ang {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false
}

@property --x {
	syntax: '<percentage>';
	initial-value: 0%;
	inherits: false
}

@property --y {
	syntax: '<percentage>';
	initial-value: 0%;
	inherits: false
}

body, div { display: grid }

body {
	place-content: center;
	overflow: hidden;
	margin: 0;
	height: 100vh;
	background: #000;
	color: #fff;
	font-size: clamp(1em, 6vw, 2em);
	
	&::after {
		padding: 4*$r;
		background: 
			repeating-conic-gradient(from var(--ang) at var(--x) var(--y), 
					$c, nth($c, 1) 33.333%);
		mix-blend-mode: multiply;
		animation: a 4*$t infinite;
		animation-name: ang, x, y;
		animation-timing-function: linear, $ease0, $ease1;
		content: ''
	}
}

@keyframes ang { to { --ang: 1turn } }

@keyframes x { 50% { --x: 100% } }
@keyframes y { 50% { --y: 100% } }

div, ::before, ::after {
	grid-area: 1/ 1;
	place-self: center;
	border-radius: 50%;
}

.load {
	padding: 4*$r;
	background: inherit;
}

.a2d {
	filter: drop-shadow(0 0 $g currentcolor) blur(1px);
	animation: r 2*$t linear infinite
}

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

.🔴 {
	--not-i: calc(1 - var(--i));
	--sgn-i: calc(2*var(--i) - 1);
	--full: linear-gradient(currentcolor, currentcolor);
	margin-top: calc(var(--sgn-i)*2*#{$r});
	border: solid $b transparent;
	padding: $g;
	width: $d; height: $d;
	transform: 
		rotate(calc(var(--not-i)*.5turn)) 
		scalex(var(--sgn-i));
	background: 
		var(--full) content-box, 
		conic-gradient(
				transparent calc(var(--k0)*100%), 
				currentcolor 0%  calc(var(--k1)*100%), 
				transparent 0%) border-box;
	--mask:
		var(--full) content-box, 
		var(--full) padding-box, 
		var(--full);
	-webkit-mask: var(--mask);
	-webkit-mask-composite: xor;
					mask: var(--mask);
					mask-composite: exclude;
	animation: a $t linear calc(var(--not-i)*-.5*#{$t}) infinite;
	animation-name: k0, k1;
	
	&::before, &::after {
		width: $b; height: $b;
		transform: 
			rotate(calc(var(--k, var(--k0, 0))*1turn)) 
			translatey(-1*$r);
		opacity: calc(1000*(var(--k1) - var(--k0)));
		background: currentcolor;
		content: ''
	}
	
	&::after { --k: var(--k1, .35) }
}

@keyframes k0 {
	0%, #{$p} { --k0: 0 }
	#{2*$p} { --k0: #{1 - $k} }
	#{3*$p}, 100% { --k0: 1 }
}

@keyframes k1 {
	0% { --k1: 0 }
	#{$p} { --k1: #{$k} }
	#{2*$p}, 100% { --k1: 1 }
}
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js