@keyframes water-wave {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.wave {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 50px;
  font-size: 14px;
  text-align: center;
  overflow: hidden;
  animation: water-wave linear infinite;
  box-shadow: 0 0 35px rgb(16 119 188 / 60%) inset;
}
  .wave1 {
    position: absolute;
    top: 60%;
    left: -65%;
    background: #0480C0;
    opacity: .6;
    width: 260%;
    height: 260%;
    border-radius: 40%;
    animation: inherit;
    animation-duration: 10s;
  }

  .wave2 {
    position: absolute;
    top: 60%;
    left: -60%;
    background: #0480C0;
    opacity: .4;
    width: 260%;
    height: 260%;
    border-radius: 35%;
    animation: inherit;
    animation-duration: 15s;
  }

  .wave3 {
    position: absolute;
    top: 60%;
    left: -55%;
    background: #0480C0;
    opacity: .2;
    width: 260%;
    height: 260%;
    border-radius: 40%;
    animation: inherit;
    animation-duration: 20s;
  }