CSS Loader Atom

HTML

<main>
	<div class="atom">
		<div class="electron"></div>
		<div class="electron-alpha"></div>
		<div class="electron-omega"></div>
	</div>
</main>

CSS

:root {
	--atom-size: 180px;
	--atom-color-hex: #00d8ff;
	--atom-color-rgb: 0 , 216, 255;
	--nucleus-size: calc(var(--atom-size) / 5);
	--electron-color-hex: #99f8ff;
	--electron-orbit-size: calc(var(--atom-size) / 2.5);
	--electron-size: calc(var(--atom-size) / 25);
	--electron-speed: 1.2s;
	--electron-speed-alpha: 1s;
	--electron-speed-omega: .8s;
}

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #1f1f1f;
}
body {
	display: grid;
	place-items: center;
	box-sizing: border-box;
}
*, *:before, *::after {
	box-sizing: border-box;
}
.atom {
	position: relative;
	width: var(--atom-size);
	height: var(--atom-size);
	animation: 8s atom infinite cubic-bezier(1, .25, 0, .75);
}
@keyframes atom {
	0% {
		transform: rotate(0deg) scale(1);
	} 
	12.5% {
		transform: rotate(-45deg) scale(.9);
	}
	25% {
		transform: rotate(-90deg) scale(1);
	}
	37.5% {
		transform: rotate(-135deg) scale(.9);
	}
	50% {
		transform: rotate(-180deg) scale(1);
	}
	62.5% {
		transform: rotate(-225deg) scale(.9);
	}
	75% {
		transform: rotate(-270deg) scale(1);
	}
	87.5% {
		transform: rotate(-315deg) scale(.9);
	}
	100% {
		transform: rotate(-360deg) scale(1);
	}
}
.atom::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--nucleus-size);
	height: var(--nucleus-size);
	margin-top: calc(var(--nucleus-size) / -2);
	margin-left: calc(var(--nucleus-size) / -2);
	background: var(--electron-color-hex);
	border-radius: 100%;
	box-shadow: 0 0 3px 0 var(--atom-color-hex);
	animation: 2s nucleus infinite cubic-bezier(.65, 0, .35, 1);
}
@keyframes nucleus {
	0% {
		transform: scale(1);
	}
	25% {
		transform: scale(.9);
	}
	50% {
		transform: scale(1);
	}
	75% {
		transform: scale(.85);
	}
	100% {
		transform: scale(1);
	}
}

.atom > [class^='electron'] {
	border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
	border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
	border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
	border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
	border-radius: 100%;
	width: 100%;
	height: var(--electron-orbit-size);
	position: absolute;
	top: 50%;
	margin-top: calc(var(--electron-orbit-size) / -2);
	animation: var(--electron-speed) electron-orbit infinite linear;
}
.atom > .electron-alpha {
	transform: rotate(60deg);
	animation: var(--electron-speed-alpha) electron-orbit infinite linear;
}
.atom > .electron-omega {
	transform: rotate(-60deg);
	animation: var(--electron-speed-omega) electron-orbit infinite linear;
}
@keyframes electron-orbit {
	0% {
		border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
		border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
		border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
		border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
	}
	25% {
		border-top: solid rgba(var(--atom-color-rgb), .35) 1px;
		border-right: solid rgba(var(--atom-color-rgb), .2) 2px;
		border-bottom: solid rgba(var(--atom-color-rgb), 0) 4px;
		border-left: solid rgba(var(--atom-color-rgb), .5) 2px;
	}
	50% {
		border-top: solid rgba(var(--atom-color-rgb), .2) 1px;
		border-right: solid rgba(var(--atom-color-rgb), 0) 2px;
		border-bottom: solid rgba(var(--atom-color-rgb), .5) 4px;
		border-left: solid rgba(var(--atom-color-rgb), .35) 2px;
	}
	75% {
		border-top: solid rgba(var(--atom-color-rgb), 0) 1px;
		border-right: solid rgba(var(--atom-color-rgb), .5) 2px;
		border-bottom: solid rgba(var(--atom-color-rgb), .35) 4px;
		border-left: solid rgba(var(--atom-color-rgb), .2) 2px;
	}
	100% {
		border-top: solid rgba(var(--atom-color-rgb), .5) 1px;
		border-right: solid rgba(var(--atom-color-rgb), .35) 2px;
		border-bottom: solid rgba(var(--atom-color-rgb), .2) 4px;
		border-left: solid rgba(var(--atom-color-rgb), 0) 2px;
	}
}
.atom > [class^='electron']::after {
	content: '';
	display: block;
	width: var(--electron-size);
	height: var(--electron-size);
	background: var(--electron-color-hex);
	border-radius: 50%;
	margin-top: calc(var(--electron-size) / -2);
	position: absolute;
	top: 50%;
	left: calc(var(--electron-size) / -1);
	transform: scale(1);
	animation: calc(var(--electron-speed) * 2) electron infinite ease-in-out;
}
.atom .electron-alpha::after {
	animation: calc(var(--electron-speed-alpha) * 2) electron infinite ease-in-out;
}
.atom .electron-omega::after {
	animation: calc(var(--electron-speed-omega) * 2) electron infinite ease-in-out;
}
@keyframes electron {
	0% {
		left: calc(var(--electron-size) / -1);
		transform: scale(1);
	}
	12.5% {
		top: 100%;
		transform: scale(1.5);
	}
	25% {
		left: 100%;
		transform: scale(1);
	}
	37.5% {
		top: 0%;
		transform: scale(.25);
	}
	50% {
		left: calc(var(--electron-size) / -1);
		transform: scale(1);
	}
	62.5% {
		top: 100%;
		transform: scale(1.5);
	}
	75% {
		left: 100%;
		transform: scale(1);
	}
	87.5% {
		top: 0%;
		transform: scale(.25);
	}
	100% {
		left: calc(var(--electron-size) / -1);
		transform: scale(1);
	}
}
main {
	position: relative;
}
main::after {
	content: '';
	display: block;
	position: absolute;
	top: 115%;
	left: 0;
	width: var(--atom-size);
	height: var(--nucleus-size);
	background-image: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
	border-radius: 100%;
	transform: scale(1, .8);
	animation: 8s shadow infinite cubic-bezier(1, .25, 0, .75);
}
@keyframes shadow {
	0% {
		transform: scale(1, .8) translatey(0);
	}
	12.5% {
		transform: scale(.7, .7) translatey(-20px);
	}
	25% {
		transform: scale(1, .8) translatey(0);
	}
	37.5% {
		transform: scale(.7, .7) translatey(-20px);
	}
	50% {
		transform: scale(1, .8) translatey(0);
	}
	62.5% {
		transform: scale(.7, .7) translatey(-20px);
	}
	75% {
		transform: scale(1, .8) translatey(0);
	}
	87.5% {
		transform: scale(.7, .7) translatey(-20px);
	}
	100% {
		transform: scale(1, .8) translatey(0);
	}
}

Результат