<section class="loaders-wrap">
	<div class="loader">
		<div class="loading-bubbles">
			<span class="bubble"></span>
			<span class="bubble"></span>
			<span class="bubble"></span>
		</div>
	</div>
	<div class="loader">
		<div class="loading-spinning-bubbles">
			<div class="box">
				<div class="bubble"></div><div class="bubble"></div>
				<div class="bubble"></div><div class="bubble"></div>
			</div>
			<div class="box">
				<div class="bubble"></div><div class="bubble"></div>
				<div class="bubble"></div><div class="bubble"></div>
			</div>
		</div>
	</div>
	<div class="loader">
		<div class="loading-spokes">
			<div class="spoke"></div>
			<div class="spoke"></div>
			<div class="spoke"></div>
			<div class="spoke"></div>
		</div>
	</div>
	<div class="loader">
		<div class="loading-bars">
			<span class="bar"></span>
			<span class="bar"></span>
			<span class="bar"></span>
			<span class="bar"></span>
			<span class="bar"></span>
		</div>
	</div>
	<div class="loader">
		<div class="loading-circle"></div>
	</div>
	<div class="loader">
		<div class="loading-quarter-circle"></div>
	</div>
	<div class="loader">
		<div class="loading-flip"></div>
	</div>
	<div class="loader">
		<div class="loading-slide">
			<div class="slide"></div>
			<div class="slide"></div>
			<div class="slide"></div>
		</div>
	</div>
</section>
body{ background: #41ab6b; }
*,*:before,*:after{ box-sizing: border-box; }

.loaders-wrap{
	padding: 30px 40px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	.loader{
		display:flex;
		justify-content: center;
		align-items: center;
		height: 100px;
		width: 25%;
	}
}
.loading-bubbles{
	font-size: 0;
	.bubble{
		display:inline-block; margin: 3px;
		width: 10px; height: 10px; border-radius:50%;
		background: #fff; position: relative;
		animation: bubble 1.2s infinite ease-out;
		&:nth-child(1){ animation-delay: -.6s; }
		&:nth-child(2){ animation-delay: -.3s; }
		&:nth-child(3){ animation-delay: 0s; }
	}
}

.loading-spinning-bubbles	{
	width 60px
	height 60px
	position relative
	transform scale(.6)
	.bubble{
		width 10px
		height 10px
		border-radius: 50%;
		background #fff;
		position absolute
		&:nth-child(1){ top: -5px; left: -5px; }
		&:nth-child(2){ top: -5px; right: -5px; }
		&:nth-child(3){ bottom: -5px; right: -5px; }
		&:nth-child(4){ bottom: -5px; left: -5px; }
		animation bubble 1s infinite;
	}
	.box{
		width 60%
		height 60%
		position absolute
		top 20%
		right 20%
		&:nth-child(1){
			transform: rotate(45deg);
		 	.bubble:nth-child(1){ animation-delay: -1.5s; }
			.bubble:nth-child(2){ animation-delay: -1.25s; }
			.bubble:nth-child(3){ animation-delay: -1s; }
			.bubble:nth-child(4){ animation-delay: -0.75s; }
		}
		&:nth-child(2){
			.bubble:nth-child(2){ animation-delay: -1.375s; }
			.bubble:nth-child(3){ animation-delay: -1.125s; }
			.bubble:nth-child(4){ animation-delay: -0.875s; }
			.bubble:nth-child(1){ animation-delay: -0.625s; }
		}
	}
}

.loading-spokes{
	position relative
	width 20px
	height 10px
	transform scale(.5)
	.spoke{
		width 20px
		height 10px
		background transparent
		position absolute
		&:before,&:after{
			height 100%
			width 80%
			content: ' '
			position absolute
			background #fff;
			animation spoke 1s infinite
		}
		&:before{ left: -110%;}
		&:after{ right: -110%;}
		&:nth-child(1){
			&:before{ animation-delay: -0.375s; }
			&:after{ animation-delay: -0.875s; }
		}
		&:nth-child(2){ 
			transform: rotate(45deg);
	 		&:before{ animation-delay: -0.25s; }
			&:after{ animation-delay: -0.75s; }
		}
		&:nth-child(3){ 
			transform: rotate(90deg)
			&:before{ animation-delay: -0.125s; }
			&:after{ animation-delay: -0.625s; }
		}
		&:nth-child(4){ 
			transform: rotate(135deg)
			&:before{ animation-delay: 0; }
			&:after{ animation-delay: -0.5s; }
		}
	}
}

.loading-bars{
	font-size: 0;
	.bar{
		margin: 2px;
		display:inline-block
		width 5px
		height 10px
		background #fff
		animation: pulse 1s infinite;
		&:nth-child(1){ animation-delay: 0s; }
		&:nth-child(2){ animation-delay: .2s; }
		&:nth-child(3){ animation-delay: .4s; }
		&:nth-child(4){ animation-delay: .6s; }
		&:nth-child(5){ animation-delay: .8s; }
	}
}
.loading-circle, .loading-quarter-circle{
	width 30px
	height 30px
	border: 3px solid rgba(255,255,255, .5);
	border-radius: 50%
	border-left-color: #fff;
	animation: spin 1s infinite linear;
}
.loading-quarter-circle {
	border: 3px solid transparent;
	border-left-color: #fff;
	animation-duration: 1.2s;
}
.loading-flip{
	width: 20px;
	height: 20px;
	background: #fff;
	margin: 0 auto;
	animation flip 8s infinite;
}

.loading-slide{
	width 25%
	position relative
	.slide{
		position absolute
		height 5px
		width 100%
		background #fff
		animation: slide 2s infinite;
		&:nth-child(1){ 
			transform: scaleX(1); opacity: .2; 
			animation-delay: .2s;
		}
		&:nth-child(2){ 
			transform: scaleX(.8); opacity: .4; 
			animation-delay: .1s;
		}
		&:nth-child(3){ 
			transform: scaleX(.4); opacity: .8; 
		}
	}
}

@keyframes bubble{
	0%,100%{ transform:scale(0);}
	50% {transform: scale(1);}
}
@keyframes spoke{
 	from { opacity: 1 }
	to { opacity: .2 }
}
@keyframes pulse{
	0%, 75% { transform: scaleY(1); }
	25% { transform: scaleY(3);}
}
@keyframes spin{
 to { transform: rotate(360deg); }
}
@keyframes flip{
	0% {
			transform: rotateX(0) rotateY(0);
	}
	20%, 25% {
			transform: rotateX(0) rotateY(720deg);
	}
	45%, 50% {
			transform: rotateX(720deg) rotateY(720deg);
	}
	70%, 75% {
			transform: rotateX(720deg) rotateY(0);
	}
	95%, 100% {
			transform: rotateX(0) rotateY(0);
	}
}
@keyframes slide{
 0%, 100% { left: 0; }
 50% { left: 100%; }
}
View Compiled
Rerun