:root {
	--bg1: #05253a;
	--bg2: #c41146;
	--wrm: #d1faff;
	--deg: -12deg;
	--sz: 15vmin;
	--spd: 2.05s;
}

@property --deg {
	syntax: '<angle>';
	inherits: false;
	initial-value: -12deg;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg1);
}

.loader {
	width: var(--sz);
	height: var(--sz);
	background: conic-gradient(from var(--deg) at 50% 50%, var(--bg1) 0, var(--wrm) 25deg 50deg, var(--bg1) 51deg 100%);
	clip-path: polygon(0% 0%, 40% 0%, 50% 10%, 60% 0%, 100% 0%, 100% 40%, 90% 50%, 100% 60%, 100% 100%, 60% 100%, 50% 90%, 40% 100%, 0% 100%, 0% 60%, 10% 50%, 0% 40%);
	animation: spin var(--spd) linear 0s infinite;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: calc(var(--sz) / 10);
}

.loader:hover {
	animation: spin var(--spd) linear 0s infinite, rotation var(--spd) linear 0s infinite;
}

.loader:before {
	content: "";
	position: absolute;
	width: calc(100% - calc(var(--sz) / 10));
	height: calc(100% - calc(var(--sz) / 10));
	border-radius: calc(var(--sz) / 20);
	background: var(--bg2);
	clip-path: polygon(0% 0%, 38% 0%, 50% 12%, 62% 0%, 100% 0%, 100% 38%, 88% 50%, 100% 62%, 100% 100%, 62% 100%, 50% 88%, 38% 100%, 0% 100%, 0% 62%, 12% 50%, 0% 38%);
}

@keyframes spin {
	  0% { --deg: -12deg; }
	100% { --deg: 348deg; }
}

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