.loader {
    --block-size: 18rem;
	--loader-size: calc(var(--block-size) / 2);
	--loader-size-half: calc(var(--loader-size) / 2);
	--loader-size-half-neg: calc(var(--loader-size-half) * -1);
	--light-color: rgb(146, 146, 146);
    --dot-size: 15px;
    --dot-size-half: calc(var(--dot-size) / 2);
    --dot-size-half-neg: calc(var(--dot-size-half) * -1);
	
	display: block;
	position: relative;
	width: var(--loader-size);
	display: grid;
	place-items: center;
	color: rgb(255, 255, 255);
}

.loader::before,
.loader::after {
	content: '';
	position: absolute;
}
/**
	loader--3
**/
.loader--3 {
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 1.2s;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--light-color);
	border-radius: 50%;
}

.loader--3::before,
.loader--3::after {
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	top: var(--dot-size-half-neg);
	left: calc(50% - var(--dot-size-half));
	animation: loader-3 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
	transform-origin: center calc(var(--loader-size-half) + var(--dot-size-half) - 1px);
}

.loader--3::after {
	animation-delay: calc(var(--anim-duration) / 3 * -1);
}

@keyframes loader-3 {
	100% {
		transform: rotate(1turn);
	}
}