<div class="loader">
	<div class="loader__ball"></div>
	<div class="loader__ball"></div>
	<div class="loader__ball"></div>
</div>

$dotColor: #FFFFFF;
$bgColor: #69C2A3;
$dotSize: 1.75rem;
$duration: 2.5s;

html,
body {
	margin: 0;
	height: 100%;
}

body {
	background: $bgColor;
	display: grid;
	place-content: center;
}

.loader {
	animation: rotate $duration linear infinite normal;
	position: relative;
	transform-origin: 50% 50%;

	&__ball {
		height: $dotSize;
		left: -$dotSize / 2;
		position: absolute;
		top: -$dotSize / 2;
		transform-origin: 50% 50%;
		width: $dotSize;

		&:nth-of-type(2) {
			transform: rotate(120deg);
		}

		&:nth-of-type(3) {
			transform: rotate(240deg);
		}

		&::after {
			animation: moveAndScale $duration / 2 ease-in-out infinite alternate;
			background-color: $dotColor;
			border-radius: 50%;
			content: "";
			display: inline-block;
			height: 100%;
			width: 100%;
			transform-origin: 50% 50%;
		}
	}
}

@keyframes rotate {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes moveAndScale {
	0%, 15% {
		transform: translateY(0) scale(0.65);
	}
	100% {
		transform: translateY(-150%) scale(1);
	}
}