<div class="circle" style="display: inline-block;position: relative;"> <div class="wave0 wave"></div> <div class="wave1 wave"></div> <div class="wave2 wave"></div> <div class="wave3 wave"></div> <div class="wave4 wave"></div> </div>
.circle{ position: relative; /* margin: 0 auto; */ /* left: 40%; bottom: 20px;*/ } .wave{ position:absolute; border-radius: 100%; top:calc((100% - 50px)/2); left:calc((100% - 50px)/2); width: 50px; height: 50px; } .wave0{ background:#ffffff; border:1px solid black; z-index: 2 -webkit-animation: sk-scaleout 2s infinite ease-in-out; animation: sk-scaleout 2s infinite ease-in-out; animation-delay:2s; } .wave1{ background:#aeaeae; border:1px solid black; z-index:3; -webkit-animation: sk-scaleout 2s infinite ease-in-out; animation: sk-scaleout 2s infinite ease-in-out; animation-delay:2s; } .wave2{ background:#ffffff; border:1px solid black; z-index:4; -webkit-animation: sk-scaleout 4s infinite ease-in-out; animation: sk-scaleout 4s infinite ease-in-out; animation-delay:2s; } .wave3{ background:#4d4d4d; border:1px solid black; z-index:5; -webkit-animation: sk-scaleout 6s infinite ease-in-out; animation: sk-scaleout 6s infinite ease-in-out; animation-delay:2s; } .wave4{ background:#3c3c3c; border:1px solid black; z-index:6; -webkit-animation: sk-scaleout 8s infinite ease-in-out; animation: sk-scaleout 8s infinite ease-in-out; animation-delay:2s; }