CSS Loader

Loader

HTML

<div class="loader">
	<div class="loader--blue">
		<div></div>
		<div></div>
		<div></div>
	</div>
	<div class="loader--green">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

CSS

@-webkit-keyframes animated-loader {
	0% {
		opacity: 1;
		transform: scale(0.1);
	}
	70% {
		opacity: 0.7;
		transform: scale(1);
	}
	100% {
		opacity: 0.0;
	}
}
@keyframes animated-loader {
	0% {
		opacity: 1;
		transform: scale(0.1);
	}
	70% {
		opacity: 0.7;
		transform: scale(1);
	}
	100% {
		opacity: 0.0;
	}
}
.loader {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.loader--blue {
	height: 50px;
	left: 50%;
	opacity: 0.5;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50px;
}
.loader--blue > div:nth-child(0) {
	animation-delay: -0.8s;
}
.loader--blue > div:nth-child(1) {
	animation-delay: -0.6s;
}
.loader--blue > div:nth-child(2) {
	animation-delay: -0.4s;
}
.loader--blue > div:nth-child(3) {
	animation-delay: -0.2s;
}
.loader--blue > div {
	animation: animated-loader 1.25s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
	animation-fill-mode: both;
	border: 2px solid #13b5ea;
	border-radius: 100%;
	height: 50px;
	position: absolute;
	width: 50px;
}

.loader--green {
	height: 100px;
	left: 50%;
	opacity: 0.5;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
}
.loader--green > div:nth-child(0) {
	animation-delay: -0.8s;
}
.loader--green > div:nth-child(1) {
	animation-delay: -0.6s;
}
.loader--green > div:nth-child(2) {
	animation-delay: -0.4s;
}
.loader--green > div:nth-child(3) {
	animation-delay: -0.2s;
}
.loader--green > div {
	animation: animated-loader 3s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
	animation-fill-mode: both;
	border: 1px solid #6bcc04;
	border-radius: 100%;
	height: 100px;
	position: absolute;
	width: 100px;
}