SOURCE

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

$blue: #0097FB;

body {
	background-color: #2D2D30;
	overflow: hidden;
}

.dot {
	position: absolute;
	
	width: 10px;
	height: 10px;
	border-radius: 20px;
	
	top: 50%;

	background-color: $blue;
	
	transform: translate(0, -50%);

	animation: 3s linear loader infinite;
}

.dot:nth-of-type(1) {
	left: 0px;
}

.dot:nth-of-type(2) {
	left: -10px;
	animation-delay: 0.15s;
}

.dot:nth-of-type(3) {
	left: -20px;
	animation-delay: 0.3s;
	
}

.dot:nth-of-type(4) {
	left: -30px;
	animation-delay: 0.45s;
	
}

.dot:nth-of-type(5) {
	left: -40px;
	animation-delay: 0.60s;
	
}

@keyframes loader {
	0%, 20% {
			transform: translate(0, -50%);
			opacity: 0;
	}
	35% {
		transform: translate(45vw, -50%);
		opacity: 1;
	}
	65% {
		transform: translate(55vw, -50%);
		opacity: 1;
	}
	80%, 100% {
			transform: translate(100vw, -50%);
			opacity: 0;
	}
}