.center
	.loader
		.circle.circle-1
		.circle.circle-2
		.circle.circle-3
		.circle.circle-4

$bg-color: #111116;
$radius: 32px;
$border: 4px;
$circle1-color: #FC1460;
$circle2-color: #5A87FF;
$circle3-color: #18FD91;
$circle4-color: #FBF38C;

body {
	background-color: $bg-color;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.circle {
	display: inline-block;
	width: $radius;
	height: $radius;
	border-radius: 50%;
	margin: 0 4px;
}

.circle-1 {
	border: $border solid $circle1-color;
}

.circle-2 {
	border: $border solid $circle2-color;
}

.circle-3 {
	border: $border solid $circle3-color;
}

.circle-4 {
	border: $border solid $circle4-color;
}

var circle1 = anime ({
  targets: ['.circle-1'],
  translateY: -24,
		translateX: 52,
		direction: 'alternate',
  loop: true,
  elasticity: 400,
		easing: 'easeInOutElastic',
	 duration: 1600,
		delay: 800,
});

var circle2 = anime ({
  targets: ['.circle-2'],
  translateY: 24,
		direction: 'alternate',
  loop: true,
  elasticity: 400,
		easing: 'easeInOutElastic',
	 duration: 1600,
		delay: 800,
});

var circle3 = anime ({
  targets: ['.circle-3'],
  translateY: -24,
		direction: 'alternate',
  loop: true,
  elasticity: 400,
		easing: 'easeInOutElastic',
	 duration: 1600,
		delay: 800,
});

var circle4 = anime ({
  targets: ['.circle-4'],
  translateY: 24,
		translateX: -52,
		direction: 'alternate',
  loop: true,
  elasticity: 400,
		easing: 'easeInOutElastic',
	 duration: 1600,
		delay: 800,
});