<div class="page">
	<header class="header">
		<h1 class="header-title">Kinetic CSS loaders</h1>
		<p class="header-subtitle">single html element css animation</p>
	</header>

	<main class="container">
		<div class="item">
			<i class="loader loader--2"></i>
		</div>
		<div class="item">
			<i class="loader loader--3"></i>
		</div>
		<div class="item">
			<i class="loader loader--1"></i>
		</div>

		<div class="item">
			<i class="loader loader--7"></i>
		</div>
		<div class="item">
			<i class="loader loader--9"></i>
		</div>
		<div class="item">
			<i class="loader loader--8"></i>
		</div>

		<div class="item">
			<i class="loader loader--5"></i>
		</div>
		<div class="item">
			<i class="loader loader--4"></i>
		</div>
		<div class="item">
			<i class="loader loader--6"></i>
		</div>
	</main>
</div>

.loader {
	--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: rgba(255, 255, 255, 0.3);
  --dot-size: 5px;
  --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: white;
}

.loader::before,
.loader::after {
	content: '';
	position: absolute;
}

/**
	loader--1
**/
.loader--1 {
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 1s;
	--loader-1-dist: calc(var(--loader-size) - var(--dot-size-half) + 1px);
	aspect-ratio: 1 / 1;
	border: 1px solid var(--light-color);
}

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

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

@keyframes loader-1 {
	0%, 100% {
		transform: none;
	}
	
	25% {
		transform: translateX(var(--loader-1-dist));
	}
	
	50% {
		transform: translateX(var(--loader-1-dist)) translateY(var(--loader-1-dist));
	}
	
	75% {
		transform: translateX(0) translateY(var(--loader-1-dist));
	}
}

/**
	loader--2
**/
.loader--2 {
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 1s;
	height: 1px;
	background-color: var(--light-color);
}

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

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

@keyframes loader-2 {
	0%, 100% {
		transform: none;
	}
	
	44% {
		transform: translateX(calc(var(--loader-size) + var(--dot-size-half)));
	}
}

/**
	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%;
	animation: loader-3 calc(var(--anim-duration) * 3) linear infinite;
}

.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);
	}
}

/**
	loader--4
**/
.loader--4 {
	--anim-duration: 0.5s;
	aspect-ratio: 1 / 1;
	perspective: 50vmin;
	transform-style: preserve-3d;
	transform: rotateX(55deg);
}

.loader--4::before,
.loader--4::after {
	width: 50%;
	aspect-ratio: 1 / 1;
	border: 1px solid currentColor;
	top: 25%;
	left: 25%;
	border-radius: 50%;
	animation: loader-4 var(--anim-duration) cubic-bezier(0.07, 0.59, 0.56, 0.88) infinite;
}

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

@keyframes loader-4 {
	0% {
		transform: scale(0.2) translateZ(-8vmin);
	}
	
	0%, 100% {
		opacity: 0;
	}
	
	66% {
		opacity: 0.8;
		transform: scale(1.2) translateZ(6vmin);
	}
	
	100% {
		transform: scale(1.8) translateZ(2vmin);
	}
}

/**
	loader--5
**/
.loader--5 {
	--tilt-deg: 40deg;
	--anim-duration: 0.6s;
	aspect-ratio: 1 / 1;
	perspective: 50vmin;
	transform-style: preserve-3d;
	animation: loader-5-1 calc(var(--anim-duration) * 3) linear alternate-reverse infinite;
}

.loader--5::before,
.loader--5::after {
	width: 50%;
	aspect-ratio: 1 / 1;
	background-color: currentColor;
	top: 25%;
	left: 25%;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	animation: loader-5 var(--anim-duration) cubic-bezier(0.07, 0.59, 0.56, 0.88) infinite;
}

.loader--5::before {
	--turn-deg: 360deg;
}

.loader--5::after {
	--turn-deg: 410deg;
	animation-delay: calc(var(--anim-duration) / 1.8 * -1);
}

@keyframes loader-5 {
	0% {
		transform: scale(0.3) translateZ(-5vmin);
	}
	
	0%, 100% {
		opacity: 0;
	}
	
	66% {
		opacity: 0.8;
		transform: scale(1.2) translateZ(5vmin) rotate(var(--turn-deg));
	}
	
	100% {
		transform: scale(1) translateZ(3vmin) rotate(calc(var(--turn-deg) * 1.2));
	}
}

@keyframes loader-5-1 {
	0% {
		transform: rotateX(var(--tilt-deg)) rotateY(-15deg);
	}

	100% {
		transform: rotateX(var(--tilt-deg)) rotateY(15deg);
	}
}

/**
	loader--6
**/
.loader--6 {
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 0.6s;
	aspect-ratio: 1 / 1;
	perspective: 50vmin;
	transform-style: preserve-3d;
	transform: rotateX(35deg);
}

.loader--6::before,
.loader--6::after {
	width: 50%;
	aspect-ratio: 1 / 1;
	background-color: currentColor;
	top: 25%;
	left: 25%;
	animation: loader-6 var(--anim-duration) cubic-bezier(0.07, 0.59, 0.56, 0.88) infinite;
}

.loader--6::before {
	--turn-deg: -60deg;
	--x-dist: -25%;
	transform-origin: left calc(var(--loader-size) * -1);
}

.loader--6::after {
	--turn-deg: 60deg;
	--x-dist: 25%;
	transform-origin: right calc(var(--loader-size) * -1);
	animation-delay: calc(var(--anim-duration) / 2 * -1);
}

@keyframes loader-6 {
	0% {
		transform: scale(0.3) translateZ(-15vmin) rotateY(calc(var(--turn-deg) * -1));
	}
	
	0%, 100% {
		opacity: 0;
	}
	
	33% {
		opacity: 0.8;
		transform: scale(1.2) translateZ(5vmin) translateX(var(--x-dist));
	}
	
	100% {
		transform: scale(1.2) translateZ(5vmin) translateX(var(--x-dist)) rotateY(var(--turn-deg));
	}
}

/**
	loader--7
**/
.loader--7 {
	--loader-size: calc(var(--block-size) / 3);
	--anim-duration: 0.8s;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--light-color);
	border-radius: 50%;
	animation: loader-7 calc(var(--anim-duration) * 2) linear infinite;
}

.loader--7::before,
.loader--7::after {
	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: loader-7-1 var(--anim-duration) cubic-bezier(0.32, 0.41, 0.3, 1.87) infinite;
}

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

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

@keyframes loader-7-1 {
	0%, 100% {
		transform: translateX(var(--loader-size-half-neg));
	}
	
	55% {
		transform: translateX(var(--loader-size-half));
	}
}

@keyframes loader-7-2 {
	0%, 100% {
		transform: translateY(var(--loader-size-half-neg));
	}
	
	55% {
		transform: translateY(var(--loader-size-half));
	}
}

/**
	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--9
**/
.loader--9 {
	--loader-size: calc(var(--block-size) / 6);
	--anim-duration: 0.6s;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: currentColor;
	box-shadow: 0 0 var(--loader-size) var(--light-color);
	animation: loader-9 calc(var(--anim-duration) * 6) linear infinite;
}

.loader--9::before,
.loader--9::after {
	width: var(--dot-size);
	aspect-ratio: 1 / 1;
	background: currentColor;
	border-radius: 50%;
	animation: loader-9-1 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}

.loader--9::before {
	--x-dist: 0;
	--y-dist: var(--loader-size-half);
	bottom: calc(100% + var(--loader-size));
	left: calc(50% - var(--dot-size-half));
	transform-origin: center var(--loader-size);
}

.loader--9::after {
	--x-dist: var(--loader-size-half);
	--y-dist: 0;
	top: calc(50% - var(--dot-size-half));
	right: calc(100% + var(--loader-size));
	transform-origin: var(--loader-size) center;
	animation-delay: calc(var(--anim-duration) / 2 * -1);
}

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

@keyframes loader-9-1 {
	0%, 100% {
		opacity: 0;
	}
	
	33% {
		opacity: 1;
	}
	
	0% {
		transform: scale(1.1);
	}
	
	88% {
		transform: rotate(180deg) translate(var(--x-dist), var(--y-dist));
	}
}

/**
	miscs
**/

.container {
	--block-size: 18vmin;
	
	display: grid;
	grid-template-columns: repeat(3, var(--block-size));
	grid-template-rows: repeat(3, var(--block-size));
	grid-gap: 1vmin;
}

.item	{
	background: rgba(255, 255, 255, 0.1);
	display: grid;
	place-items: center;
	border-radius: 4px;
	transition: opacity 0.4s ease;
}

.container:hover .item {
	opacity: 0.3;
}

.container:hover .item:hover {
	opacity: 1;
}

.page {
	margin: auto;
}

.header {
	margin-bottom: 4vmin;
}

.header-title {
	font-size: 3.75vmin;
}

.header-subtitle {
	font-size: 2vmin;
	text-transform: uppercase;
	opacity: 0.6;
}

html, body {
	margin: 0;
	display: flex;
	width: 100%;
	height: 100%;
	font-family: 'Noto Sans', sans-serif;
	color: white;
	text-align: center;
	letter-spacing: 0.3px;
	background: linear-gradient(to right top, #F27121, #E94057, #8A2387);

}

*, *::before, *::after {
	box-sizing: border-box;
}