/* HTML: <div class="loader"></div> */
.loader {
	width: 25px;
	height: 14px;
	--_g: no-repeat radial-gradient(farthest-side, rgb(0, 149, 255) 94%, #0000);
	background:
		var(--_g) 50% center,
		var(--_g) 100% center;
	background-size: 6px 6px;
	position: relative;
	animation: l23-0 1.5s linear infinite;
	display: inline-block;
	top: 0.25rem;
}

.loader:before {
	content: "";
	position: absolute;
	height: 6px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgb(0, 149, 255);
	left: 0;
	top: 0.5px;
	animation:
		l23-1 1.5s linear infinite,
		l23-2 0.5s cubic-bezier(0, 200, .8, 200) infinite;
}

@keyframes l23-0 {

	0%,
	31% {
		background-position: 50% center, 100% center
	}

	33% {
		background-position: 50% 100%, 100% center
	}

	43%,
	64% {
		background-position: 50% center, 100% center
	}

	66% {
		background-position: 50% center, 100% 100%
	}

	79% {
		background-position: 50% center, 100% center
	}

	100% {
		transform: translateX(calc(-100%/3))
	}
}

@keyframes l23-1 {
	100% {
		left: calc(100% + 3.5px)
	}
}

@keyframes l23-2 {
	100% {
		top: 0.45px
	}
}