<style>

@keyframes FullRotate {
	to { transform: rotate(720deg); }
}

.loading {
	position: relative;
	width: 45px;
	height: 45px;
	margin: 60px auto 20px;
	animation: FullRotate 3s linear infinite 600ms;
}

@keyframes PulseScale {
	from, to { transform: scale(0); }
	50%      { transform: scale(1); }
}

.loading::before,
.loading::after {
	position: absolute;
	width: 25px;
	height: 25px;
	content: "";
	background-color: hsl(200, 100%, 50%);
	border-radius: 50%;
	transform: scale(0);
	animation: PulseScale 2s ease-in-out infinite;
}

.loading::before {
	top: 0;
	right: 0;
	animation-delay: 1600ms;
}

.loading::after {
	bottom: 0;
	left: 0;
	animation-delay: 600ms;
}

</style>

<div class="loading"></div>