<div class="loading-indicator">
  <div class="loadingIndicator">
    <div class="loadingIndicator-rotator">
      <div class="loadingIndicator-dot"></div>
    </div>
  </div>
</div>
html {
  height: 100%;
}

body {
  background-image: linear-gradient(to top right, #FC636B, #FF6D92 35%, #FFB900 100%);
  background-repeat: no-repeat;
}

.loadingIndicator-rotator {
  margin: 0 auto;
  margin-top: 2em;
}

.loadingIndicator .loadingIndicator-dot {
	animation:loader-topDot 1.5s infinite;
	animation-delay:0s;
	background-color:white;
	border-radius:50%;
	position:relative;
	height:8px;
	width:8px;
	transform:scale(1) translateY(-6px)
}

.loadingIndicator .loadingIndicator-dot::before,.loadingIndicator .loadingIndicator-dot::after {
	background-color:white;
	border-radius:50%;
	bottom:0;
	content:"";
	left:0;
	position:absolute;
	right:0;
	top:0
}

.loadingIndicator .loadingIndicator-dot::before {
	animation:loader-leftDot 1.5s infinite;
	transform:translate(-5.2px, 9px);
}

.loadingIndicator .loadingIndicator-dot::after {
	animation:loader-rightDot 1.5s infinite;
	transform:translate(5.2px, 9px);
}

.loadingIndicator .loadingIndicator-rotator {
    animation: loader-rotation 1.5s linear infinite;
    width: 8px;
}

@keyframes loader-rotation {
	0% {
		transform:rotate(0deg);
	}
	50% {
		transform:rotate(180deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

@keyframes loader-topDot {
	0% {
		animation-timing-function:cubic-bezier(0.4, 0.155, 0.355, 1);
		transform:scale(1) translateY(-6px);
	}
	40% {
		animation-timing-function:cubic-bezier(0.475, 0.005, 0.695, 0.83);
		transform:scale(1.3) translateY(6px);
	}
	100% {
		transform:scale(1) translateY(-6px);
	}
}

@keyframes loader-leftDot {
	0% {
		animation-timing-function:cubic-bezier(0.4, 0.155, 0.355, 1);
		transform:translate(-5.2px, 9px);
	}
	40% {
		animation-timing-function:cubic-bezier(0.475, 0.005, 0.695, 0.83);
		transform:translate(5.18px, -9px);
	}
	100% {
		transform:translate(-5.2px, 9px);
	}
}

@keyframes loader-rightDot {
	0% {
		animation-timing-function:cubic-bezier(0.4, 0.155, 0.355, 1);
		transform: translate(5.2px, 9px);
	}
	40% {
		animation-timing-function:cubic-bezier(0.475, 0.005, 0.695, 0.83);
		transform:translate(-5.18px, -9px)
	}
	100% {
		transform:translate(5.2px, 9px)
	}
}
View Compiled
Rerun