<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="circle"> <div class="wave"></div> </div> </div>

body { margin:0; padding:0; } .circle { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:350px; height:350px; border: 5px solid #fff; box-shadow:0 0 0 5px #4973ff; border-radius:50%; overflow:hidden; } .wave { position:relative; width:100%; height:100%; background:#4973ff; border-radius:50%; box-shadow:inset 0 0 50px rgba(0,0,0,.5); } .wave:before, .wave:after{ content:''; position:absolute; width:200%; height:200%; top:0; left:50%; transform:translate(-50%,-75%); background:#000; } .wave:before { border-radius:45%; background:rgba(255,255,255,1); animation:animate 5s linear infinite; } .wave:after { border-radius:40%; background: rgba(255,255,255,.5); animation: animate 10s linear infinite; } @keyframes animate { 0%{ transform: translate(-50%,-75%) rotate(0deg); } 100%{ transform: translate(-50%,-75%) rotate(360deg); } }