css loader

loader.css

.loader {
	--loader-color: #197AFF;
	--loader-size: 160px;

	width: var(--loader-size);
	height: var(--loader-size);
	position: relative;
	clip-path: circle(50%);
}

.loader::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: conic-gradient(transparent, var(--loader-color));
	mask: radial-gradient(circle, transparent 50%, black 51%);
	animation: rotation 2s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	50% {
		filter: hue-rotate(60deg);
	}
	100% {
		transform: rotate(360deg);
	}
}