"Sonar Wave Effect in Circle With CSS"
Bootstrap 4.1.1 Snippet by kbuchana

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- http://www.mangcut.vn/blog/2014-11-26-sonar-effect-with-css.html --> <div class="sonar-wrapper"> <div class="sonar-emitter"> <div class="sonar-wave"></div> </div> </div>
/* Make it looks good on CodePen */ html { background-color: #cef; } html, body, .sonar-wrapper { height: 100%; } /* Prevent scrollbars to appear when waves go out of bound */ .sonar-wrapper { position: relative; z-index: 0; overflow: hidden; padding: 8rem 0; } /* The circle */ .sonar-emitter { position: relative; margin: 0 auto; width: 275px; height: 275px; border-radius: 9999px; background-color: HSL(45,100%,50%); } /* the 'wave', same shape and size as its parent */ .sonar-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 9999px; background-color: HSL(45,100%,50%); opacity: 0; z-index: -1; pointer-events: none; } /* Animate! NOTE: add browser prefixes where needed. */ .sonar-wave { animation: sonarWave 2s linear infinite; } @keyframes sonarWave { from { opacity: 0.4; } to { transform: scale(3); opacity: 0; } }

Related: See More


Questions / Comments: