<div class="waves"></div>
html,body {
width: 100%;
height: 100%;
}
body {
background: #0A212E;
margin: 0px;
overflow: hidden;
animation: color-loop 18s infinite;
}
.waves {
position: relative;
top: 50%;
background: rgba(255, 255, 255, 0.3);
left: 50%;
width: 25px;
height: 25px;
margin-left: -12px;
margin-top: -12px;
border-radius: 50%;
-webkit-backface-visibility: hidden;
}
.waves:before {
position: absolute;
background: white;
margin-left: -12px;
margin-top: -12px;
width: 50px;
height: 50px;
content: "";
display: block;
border-radius: 50%;
-webkit-backface-visibility: hidden;
animation: wave-animate 3s infinite ease-ou