.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(0, 55, 92);
    --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(0, 102, 255);
}

.loader::before,
.loader::after {
	content: '';
	position: absolute;
}
/**
	loader--8
**/
.loader--8 {
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 0.8s;
	aspect-ratio: 1 / 1;
	border: 1px dashed var(--light-color);
	border-radius: 50%;
	perspective: 50vmin;
	transform-style: preserve-3d;
	transform: rotateX(45deg) rotateY(15deg);
}

.loader--8::before,
.loader--8::after {		
	animation: loader-8 var(--anim-duration) cubic-bezier(0.39, 0.24, 0, 0.99) infinite;
}

.loader--8::before {
	--z-dist: 8vmin;
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	top: calc(50% - var(--dot-size-half));
	left: calc(50% - var(--dot-size-half));
	animation-delay: calc(var(--anim-duration) / 4 * -1);
}

.loader--8::after {
	--z-dist: 4vmin;
	width: 65%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: 1px solid currentColor;
}

@keyframes loader-8 {
	0%, 100% {
		transform: translateZ(calc(var(--z-dist) * -1)) scale(0.6);
	}
	
	55% {
		transform: translateZ(var(--z-dist));
	}
}


/* LOADER */
.loader-container {
    background: black;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    color: white;
    text-transform: uppercase;
    align-items: center;
    justify-content: center;
}
.the-loader i {
    z-index: 10001;
}