<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;
}
}
