body{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90vh;
	background: #1e6cc7;
}
.container{
	width: 200px;
	height: 60px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;	
}
.circle{
	width: 20px;
	height: 20px;
	position: absolute;
	border-radius: 50%;
	background: white;
	left: 15%;
	transform-origin: 50%;
	animation: circle .5s alternate infinite ease;
}
@keyframes circle{
	0%{
		top: 60px;
		height: 5px;
		border-radius: 50px 50px 25px 25px;
		transform: scaleX(1.7);
	}
	40%{
		height: 20px;
		border-radius: 50%;
		transform: scaleX(1);
	}
	100%{
		top: 0%;
	}
}
.circle:nth-child(2){
	left: 35%;
	animation-delay: .2s;
}
.circle:nth-child(3){
	left: 55%;
	animation-delay: .3s;
}
.circle:nth-child(4){
	left: auto;
	right: 15%;
	animation-delay: .4s;
}
.circle-shadow{
	width: 20px;
	height: 4px;
	border-radius: 50%;
	background:white;
	position: absolute;
	top: 62px;
	left: 15%;
	z-index: -1;
	transform-origin: 50%;
	filter: blur(1px);
	animation: shadow .5s alternate infinite ease;
}
@keyframes shadow{
	0%{
		transform: scaleX(1.5);
	}
	40%{
		transform: scaleX(1);
	}
	100%{
		transform: scaleX(1.2);
		opacity: .4;
	}
}
.circle-shadow:nth-child(5){
	left: 35%;
	animation-delay: .2s;
}
.circle-shadow:nth-child(6){
	left: 55%;
	animation-delay: .3s;
}
.circle-shadow:nth-child(7){
	left: auto;
	right: 15%;
	animation-delay: .4s;
}