.container
	- (1..4).each do |i|
		%div{class: "circle circle-#{i}"}

body, html {
	height: 100%;
	background: #F6F4EE;
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.circle {
	width: 40px;
	height: 40px;
	background: red;
	border-radius: 50%;
	offset-path: path("M0,0a72.5,72.5 0 1,0 145,0a72.5,72.5 0 1,0 -145,0");
	offset-rotate: 0deg;
	position: relative;
	transform: scale(1.5);
}

.circle-1 {
	width: 30px;
	height: 30px;
	background: #814AB1;
}

.circle-2 {
	width: 25px;
	height: 25px;
	background: #4CBDC9;
	left: -30px;
}

.circle-3 {
	width: 20px;
	height: 20px;
	background: #FFCE24;
	left: -55px;
}

.circle-4 {
	width: 15px;
	height: 15px;
	background: #FF2D74;
	left: -75px;
}


	@for $i from 1 through 4 {
		.circle-#{$i} {
			animation: load 1.8s cubic-bezier(0.860, 0.000, 0.070, 1.000) infinite;
			animation-delay: 0.147s * $i;
			animation-fill-mode: forwards;
			z-index: 100 - $i;
		}
	}

@keyframes load {
	from {
		offset-distance: 0;
	}
	
	to {
		offset-distance: 100%;
	}
}