<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="circle"> <div class="wave"> </div> <span></span> </div>

body { margin: 0; padding: 0; } .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 150px; height: 150px; 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: 0 0 50px rgba(0, 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); } }