Bubble Loaders in CSS

In this demo, we'd love to share bubble loaders animation/effects with pure CSS with you guys.

In this article we provide the bubble blink effect, zoom in, zoom out, bubble collides animation, bubble bars effects. 

In this article, we're using custom CSS animation/transition. You can change the animation according to your need.

*Note: Some Advance animation will only work in the latest supported browsers.

HTML

<div class="loader-box">
	<div class="bubble"></div>
	<div class="bubble animate"></div>
	<div class="bubble animate delay-2"></div>
</div>
<div class="loader-box">
	<div class="bubble zoom-in"></div>
	<div class="bubble zoom-out"></div>
</div>
<div class="loader-box">
	<div class="bubble zoom-out-xl"></div>
</div>
<div class="loader-box">
	<div class="bubble relative animate"></div>
	<div class="bubble relative animate delay-1"></div>
	<div class="bubble relative animate delay-2"></div>
</div>
<div class="loader-box">
	<div class="bubble relative zoom"></div>
	<div class="bubble relative zoom delay-1"></div>
	<div class="bubble relative zoom delay-2"></div>
	<div class="bubble relative zoom delay-3"></div>
</div>
<div class="cf"></div><br />
<div class="loader-box">
	<div class="bubble relative solid collide"></div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-top-bottom">
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-left-right">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
<div class="loader-box">
	<div class="bubble relative solid bgt in-out-zoom">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>

CSS

/* Loader box: parent class; */
.loader-box {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	width: 200px;
	height: 200px;
}
/* Bubble */
.bubble {
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translate(-50%, -50%);
	   -moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		 -o-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
	right: 0;
	margin: 0 auto;
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	opacity: 0;
}
.bubble.relative {
	position: relative;
	left: 50%;
	float: left;
	margin-left: 20px
}
/* Bubble animation */
.bubble.animate {
	-webkit-animation: bubbleEffect 2s ease-out infinite;
	   -moz-animation: bubbleEffect 2s ease-out infinite;
		-ms-animation: bubbleEffect 2s ease-out infinite;
		 -o-animation: bubbleEffect 2s ease-out infinite;
			animation: bubbleEffect 2s ease-out infinite;
}
.bubble.animate.reverse {
	-webkit-animation: bubbleEffectReverse 2s ease-out infinite;
	   -moz-animation: bubbleEffectReverse 2s ease-out infinite;
		-ms-animation: bubbleEffectReverse 2s ease-out infinite;
		 -o-animation: bubbleEffectReverse 2s ease-out infinite;
			animation: bubbleEffectReverse 2s ease-out infinite;
	opacity: 1;
}
.bubble.animate.delay-1 {
	-webkit-animation: bubbleEffect 2s ease-out .5s infinite;
	   -moz-animation: bubbleEffect 2s ease-out .5s infinite;
		-ms-animation: bubbleEffect 2s ease-out .5s infinite;
		 -o-animation: bubbleEffect 2s ease-out .5s infinite;
			animation: bubbleEffect 2s ease-out .5s infinite;
}
.bubble.animate.delay-2 {
	-webkit-animation: bubbleEffect 2s ease-out 1s infinite;
	   -moz-animation: bubbleEffect 2s ease-out 1s infinite;
		-ms-animation: bubbleEffect 2s ease-out 1s infinite;
		 -o-animation: bubbleEffect 2s ease-out 1s infinite;
			animation: bubbleEffect 2s ease-out 1s infinite;
}
@-webkit-keyframes bubbleEffect {
	0% {
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
		opacity: 0;
	}
}
@keyframes bubbleEffect {
	0% {
		opacity: 1;
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
		opacity: 0;
	}
}
/* Bubble zoom effect */
.bubble.zoom {
	width: 10px;
	height: 10px;
	-webkit-animation: zoomEffect 2s ease-out infinite;
	   -moz-animation: zoomEffect 2s ease-out infinite;
		-ms-animation: zoomEffect 2s ease-out infinite;
		 -o-animation: zoomEffect 2s ease-out infinite;
			animation: zoomEffect 2s ease-out infinite;
}
.bubble.zoom.delay-1 {
	-webkit-animation-delay: .25s;
	-o-animation-delay: .25s;
	animation-delay: .25s;
}
.bubble.zoom.delay-2 {
	-webkit-animation-delay: .5s;
	-o-animation-delay: .5s;
	animation-delay: .5s;
}
.bubble.zoom.delay-3 {
	-webkit-animation-delay: .75s;
	-o-animation-delay: .75s;
	animation-delay: .75s;
}
@-webkit-keyframes zoomEffect {
	0% {
		opacity: 1;
		background: rgba(0, 0, 0, .5);
	}
	50% {
		-webkit-transform: scale(3);
		   -moz-transform: scale(3);
			-ms-transform: scale(3);
			 -o-transform: scale(3);
				transform: scale(3);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
			-ms-transform: scale(0);
			 -o-transform: scale(0);
				transform: scale(0);
	}
}
@keyframes zoomEffect {
	0% {
		opacity: 1;
		background: rgba(0, 0, 0, .5);
	}
	50% {
		-webkit-transform: scale(3);
		   -moz-transform: scale(3);
			-ms-transform: scale(3);
			 -o-transform: scale(3);
				transform: scale(3);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
			-ms-transform: scale(0);
			 -o-transform: scale(0);
				transform: scale(0);
	}
}
.bubble.zoom-in {
	-webkit-animation: zoomInEffect 3s ease-out infinite;
	   -moz-animation: zoomInEffect 3s ease-out infinite;
		-ms-animation: zoomInEffect 3s ease-out infinite;
		 -o-animation: zoomInEffect 3s ease-out infinite;
			animation: zoomInEffect 3s ease-out infinite;
	opacity: 1;
}
@-webkit-keyframes zoomInEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	50% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
@keyframes zoomInEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	50% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	100% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
}
.bubble.zoom-out {
	-webkit-animation: zoomOutEffect 3s ease-in infinite;
	   -moz-animation: zoomOutEffect 3s ease-in infinite;
		-ms-animation: zoomOutEffect 3s ease-in infinite;
		 -o-animation: zoomOutEffect 3s ease-in infinite;
			animation: zoomOutEffect 3s ease-in infinite;
	opacity: 1;
}
@-webkit-keyframes zoomOutEffect {
	0% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	50% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
}
@keyframes zoomOutEffect {
	0% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
	50% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	100% {
		-webkit-transform: scale(10);
		   -moz-transform: scale(10);
			-ms-transform: scale(10);
			 -o-transform: scale(10);
				transform: scale(10);
	}
}
.bubble.zoom-out-xl {
	-webkit-animation: zoomOutXLEffect 1s ease infinite;
	   -moz-animation: zoomOutXLEffect 1s ease infinite;
		-ms-animation: zoomOutXLEffect 1s ease infinite;
		 -o-animation: zoomOutXLEffect 1s ease infinite;
			animation: zoomOutXLEffect 1s ease infinite;
	opacity: 1;
}
@-webkit-keyframes zoomOutXLEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	70% {
		opacity: .5;
	}
	100% {
		-webkit-transform: scale(15);
		   -moz-transform: scale(15);
			-ms-transform: scale(15);
			 -o-transform: scale(15);
				transform: scale(15);
		opacity: 0;
	}
}
@keyframes zoomOutXLEffect {
	0% {
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	70% {
		opacity: .5;
	}
	100% {
		-webkit-transform: scale(15);
		   -moz-transform: scale(15);
			-ms-transform: scale(15);
			 -o-transform: scale(15);
				transform: scale(15);
		opacity: 0;
	}
}
/* Bubble collide efffect */
.bubble.solid.collide {
	position: relative;
	width: 25px;
	height: 25px;
	opacity: 1;
	background: #6c6c6c;
	-webkit-animation: bubbleCollideEffect 1s .25s infinite;
	   -moz-animation: bubbleCollideEffect 1s .25s infinite;
		-ms-animation: bubbleCollideEffect 1s .25s infinite;
		 -o-animation: bubbleCollideEffect 1s .25s infinite;
			animation: bubbleCollideEffect 1s .25s infinite;
}
.bubble.solid.collide:before,
.bubble.solid.collide:after {
	position: absolute;
	content: "";
	width: 25px;
	height: 25px;
	border-radius: 100%;
	z-index: 9;
	top: 0;
	background: #6c6c6c;
}
.bubble.solid.collide:before {
	left: -25px;
	-webkit-animation: bubbleCollideLeft 1s ease-out infinite;
	   -moz-animation: bubbleCollideLeft 1s ease-out infinite;
		-ms-animation: bubbleCollideLeft 1s ease-out infinite;
		 -o-animation: bubbleCollideLeft 1s ease-out infinite;
			animation: bubbleCollideLeft 1s ease-out infinite;
}
@-webkit-keyframes bubbleCollideLeft {
	0%, 100% {
		left: -25px;
	}
	40% {
		left: -50px;
	}
	50% {
		left: -25px;
	}
}
@keyframes bubbleCollideLeft {
	0%, 100% {
		left: -25px;
	}
	40% {
		left: -50px;
	}
	50% {
		left: -25px;
	}
}
.bubble.solid.collide:after {
	right: -25px;
	-webkit-animation: bubbleCollideRight 1s .5s ease-out infinite;
	   -moz-animation: bubbleCollideRight 1s .5s ease-out infinite;
		-ms-animation: bubbleCollideRight 1s .5s ease-out infinite;
		 -o-animation: bubbleCollideRight 1s .5s ease-out infinite;
			animation: bubbleCollideRight 1s .5s ease-out infinite;
}
@-webkit-keyframes bubbleCollideRight {
	0%, 100% {
		right: -25px;
	}
	40% {
		right: -50px;
	}
	50% {
		right: -25px;
	}
}
@keyframes bubbleCollideRight {
	0%, 100% {
		right: -25px;
	}
	40% {
		right: -50px;
	}
	50% {
		right: -25px;
	}
}
.bubble.solid.bgt {
	opacity: 1;
	background: transparent;
	width: 25px;
	height: 25px;
}
/* Bubble in out from top to bottom */
.bubble.solid.in-out-top-bottom span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 25px;
	height: 25px;
	background: #6c6c6c;
	border-radius: 100%;
}
.bubble.solid.in-out-top-bottom span:first-child {
	left: -30px;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease infinite;
			animation: bubbleInOutTBEffect 1.5s ease infinite;
}
.bubble.solid.in-out-top-bottom span:nth-child(2) {
	left: 0;
	opacity: 0;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
			animation: bubbleInOutTBEffect 1.5s ease .5s infinite;
}
.bubble.solid.in-out-top-bottom span:last-child {
	right: -30px;
	opacity: 0;
	-webkit-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
	   -moz-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
		-ms-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
		 -o-animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
			animation: bubbleInOutTBEffect 1.5s ease 1s infinite;
}
@-webkit-keyframes bubbleInOutTBEffect {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-25px);
		   -moz-transform: translateY(-25px);
			-ms-transform: translateY(-25px);
			 -o-transform: translateY(-25px);
				transform: translateY(-25px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
			-ms-transform: translateY(0px);
			 -o-transform: translateY(0px);
				transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(25px);
		   -moz-transform: translateY(25px);
			-ms-transform: translateY(25px);
			 -o-transform: translateY(25px);
				transform: translateY(25px);
	}
}
@keyframes bubbleInOutTBEffect {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-25px);
		   -moz-transform: translateY(-25px);
			-ms-transform: translateY(-25px);
			 -o-transform: translateY(-25px);
				transform: translateY(-25px);
	}
	50% {
		opacity: 1;
		-webkit-transform: translateY(0px);
		   -moz-transform: translateY(0px);
			-ms-transform: translateY(0px);
			 -o-transform: translateY(0px);
				transform: translateY(0px);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(25px);
		   -moz-transform: translateY(25px);
			-ms-transform: translateY(25px);
			 -o-transform: translateY(25px);
				transform: translateY(25px);
	}
}
/* Bubble in out from left to right */
.bubble.solid.in-out-left-right,
.bubble.solid.in-out-zoom {
	margin-left: 70px;
}
.bubble.solid.in-out-left-right span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #6c6c6c;
	border-radius: 100%;
}
.bubble.solid.in-out-left-right span {
	opacity: 0;
}
.bubble.solid.in-out-left-right span:first-child {
	left: -25px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out infinite;
			animation: bubbleInOutLREffect 2.5s ease-out infinite;
}
.bubble.solid.in-out-left-right span:nth-child(2) {
	left: -50px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .15s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(3) {
	left: -75px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .3s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(4) {
	left: -100px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .45s infinite;
}
.bubble.solid.in-out-left-right span:nth-child(5) {
	left: -125px;
	-webkit-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
	   -moz-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
		-ms-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
		 -o-animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
			animation: bubbleInOutLREffect 2.5s ease-out .6s infinite;
}
@-webkit-keyframes bubbleInOutLREffect {
	0%, 100% {
		-webkit-transform: translateX(-50px);
		   -moz-transform: translateX(-50px);
			-ms-transform: translateX(-50px);
			 -o-transform: translateX(-50px);
				transform: translateX(-50px);
		opacity: 0;
	}
	25% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1;
	}
	50% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1
	}
	75% {
		-webkit-transform: translateX(50px);
		   -moz-transform: translateX(50px);
			-ms-transform: translateX(50px);
			 -o-transform: translateX(50px);
				transform: translateX(50px);
		opacity: 0;
	}
}
@keyframes bubbleInOutLREffect {
	0%, 100% {
		-webkit-transform: translateX(-50px);
		   -moz-transform: translateX(-50px);
			-ms-transform: translateX(-50px);
			 -o-transform: translateX(-50px);
				transform: translateX(-50px);
		opacity: 0;
	}
	25% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1;
	}
	50% {
		-webkit-transform: translateX(0);
		   -moz-transform: translateX(0);
			-ms-transform: translateX(0);
			 -o-transform: translateX(0);
				transform: translateX(0);
		opacity: 1
	}
	75% {
		-webkit-transform: translateX(50px);
		   -moz-transform: translateX(50px);
			-ms-transform: translateX(50px);
			 -o-transform: translateX(50px);
				transform: translateX(50px);
		opacity: 0;
	}
}
/* Bubble in out with scale */
.bubble.solid.in-out-zoom span {
	position: absolute;
	content: " ";
	top: 0;
	display: inline-block;
	width: 20px;
	height: 20px;
	background: #6c6c6c;
	border-radius: 100%;
	opacity: 0;
}
.bubble.solid.in-out-zoom span:first-child {
	left: -25px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .6s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(2) {
	left: -50px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .45s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(3) {
	left: -75px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .3s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(4) {
	left: -100px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out .15s infinite;
}
.bubble.solid.in-out-zoom span:nth-child(5) {
	left: -125px;
	-webkit-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
	   -moz-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
		-ms-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
		 -o-animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
			animation: bubbleInOutZoomEffect 2.5s ease-out 0 infinite;
}
@-webkit-keyframes bubbleInOutZoomEffect {
	0% {
		opacity: 0;
		-webkit-transform: scale(.8);
		   -moz-transform: scale(.8);
			-ms-transform: scale(.8);
			 -o-transform: scale(.8);
				transform: scale(.8);
	}
	33.33% {
		opacity: 1;
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	66.66% {
		opacity: 0;
		-webkit-transform: scale(2);
		   -moz-transform: scale(2);
			-ms-transform: scale(2);
			 -o-transform: scale(2);
				transform: scale(2);
	}
}
@keyframes bubbleInOutZoomEffect {
	0% {
		opacity: 0;
		-webkit-transform: scale(.8);
		   -moz-transform: scale(.8);
			-ms-transform: scale(.8);
			 -o-transform: scale(.8);
				transform: scale(.8);
	}
	33.33% {
		opacity: 1;
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
			-ms-transform: scale(1);
			 -o-transform: scale(1);
				transform: scale(1);
	}
	66.66% {
		opacity: 0;
		-webkit-transform: scale(2);
		   -moz-transform: scale(2);
			-ms-transform: scale(2);
			 -o-transform: scale(2);
				transform: scale(2);
	}
}

You can try changing the transformation & animation to update the spinners. 

Also, check our loading spinner effect: https://designdrastic.com/snippet/loading-spinners-in-css