Ripple Loader Animation/style.css
body{
	margin: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #222;
}

span{
	display: inline-block;
	width: 35px; height: 35px;
	border-radius: 50%;
	margin: 0 5px;
	position: relative;
}

span::before{
	content: "";
	position: absolute;
	width: 100%; height: 100%;
	background-color: inherit;
	border-radius: 50%;
	z-index: -1;
	animation: ripple 1.5s ease-out infinite;
}

span:first-child{
	background-color: #ff414d;
}

span:first-child::before{ animation-delay: 0.2s; }

span:nth-child(2){
	background-color: #ff7a00;
	transform: scale(0.9);
}

span:nth-child(2)::before{ animation-delay: 0.4s; }

span:nth-child(3){
	background-color: #28df99;
	transform: scale(0.8);
}

span:nth-child(3)::before{ animation-delay: 0.6s; }

span:nth-child(4){
	background-color: #81b214;
	transform: scale(0.7);
}

span:nth-child(4)::before{ animation-delay: 0.8s; }

span:last-child{
	background-color: #f09ae9;
	transform: scale(0.6);
}

span:last-child::before{animation-delay: 1s;}

@keyframes ripple{
	from{
		opacity: 1;
		transform: scale(0);
	}

	to{
		opacity: 0;
		transform: scale(3);
	}
}











