Bubbles preloader

bubbles.css

.preloader {
  	display: inline-block;
  	position: relative;
}

.preloader-item {
	-webkit-animation: anim-preloader-item 1s ease-in-out infinite alternate;
	animation: anim-preloader-item 1s ease-in-out infinite alternate;
	background: #2ecc71;
	border-radius: 50%;
	display: inline-block;
	float: left;
	height: 30px;
	width: 30px;
}

.preloader-item:not(:first-child) {
	margin-left: 1rem;
}

.preloader-item:nth-child(1) {
	-webkit-animation-delay: -0.7s;
	animation-delay: -0.7s;
}

.preloader-item:nth-child(2) {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
}

.preloader-item:nth-child(3) {
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
}

@-webkit-keyframes anim-preloader-item {
	0% {
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes anim-preloader-item {
	0% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}

bubbles.html

<div class="preloader">
	<div class="preloader-item"></div>
	<div class="preloader-item"></div>
	<div class="preloader-item"></div>
</div>