.loader-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
}
.loader {
	width: 40px;
	height: 20px;
	--c: no-repeat radial-gradient(farthest-side, #2866f3 93%, #0000);
	background:
		var(--c) 0 0,
		var(--c) 50% 0,
		var(--c) 100% 0;
	background-size: 8px 8px;
	position: relative;
	animation: l4-0 1s linear infinite alternate;
}
.loader:before {
	content: '';
	position: absolute;
	width: 8px;
	height: 12px;
	background: #2866f3;
	left: 0;
	top: 0;
	animation:
		l4-1 1s linear infinite alternate,
		l4-2 0.5s cubic-bezier(0, 200, 0.8, 200) infinite;
}
@keyframes l4-0 {
	0% {
		background-position:
			0 100%,
			50% 0,
			100% 0;
	}
	8%,
	42% {
		background-position:
			0 0,
			50% 0,
			100% 0;
	}
	50% {
		background-position:
			0 0,
			50% 100%,
			100% 0;
	}
	58%,
	92% {
		background-position:
			0 0,
			50% 0,
			100% 0;
	}
	100% {
		background-position:
			0 0,
			50% 0,
			100% 100%;
	}
}
@keyframes l4-1 {
	100% {
		left: calc(100% - 8px);
	}
}
@keyframes l4-2 {
	100% {
		top: -0.1px;
	}
}