<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="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: 50%;
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: 50%;
background-color: HSL(45,100%,50%);
opacity: 0;
z-index: -1;
pointer-events: none;
animation: sonarWave 2s linear infinite;
}
@keyframes sonarWave {
from {
opacity: 0.4;
}
to {
transform: scale(3);
opacity: 0;
}
}
