<div class="wave-wrapper">
	<div class="wave one"></div>
	<div class="wave two"></div>
	<div class="wave three"></div>
</div>

body{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.wave-wrapper{
	position: relative;
	height: 24rem;
	width: 24rem;
	overflow: hidden;
	border-radius: 50%;
	background-color: #EFF1F6;
}

.wave{
	position: absolute;
	top: 70%;
	left: -50%;
	width: 48rem;
	height: 48rem;
	background-color: #2C4F86;
	border-radius: 35%;
	animation-name: waves;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	&.one{
		animation-duration: 7000ms;
		opacity: 0.4;
	}

	&.two{
		background-color: #70C7CB;
		animation-duration: 9000ms;
	}
	
	&.three{
		animation-duration: 12000ms;
	}
}


@keyframes waves{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}