<div class="container">
	<div class="dot"></div>
	<div class="dot"></div>
	<div class="dot"></div>
</div>

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background-color: coral;
	background: linear-gradient(45deg, #FF8E8E, #F5A94C, #E0C15B);
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.dot {
	@animation-speed: 1000ms;
	@dot-size: 10px;
	width: @dot-size;
	height: @dot-size;
	border: (@dot-size / 5) solid white;
	border-radius: 50%;
	float: left;
	margin: 0 (@dot-size / 2);
	transform: scale(0);
	.animation();
	&:nth-child(2) {
		.animation(@animation-speed * 0.3);
	}
	&:nth-child(3) {
		.animation(@animation-speed * 0.6);
	}
}

.animation(@delay: 0ms) {
	animation: fx @animation-speed ease infinite @delay;
}

@keyframes fx {
	50% {
		transform: scale(1);
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}