JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

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

<!-- 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>

CSS

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