WebTaverna /> js, css, html

<div class="wave">
    <span style="--i:1">W</span>
    <span style="--i:2">e</span>
    <span style="--i:3">b</span>
    <span style="--i:4">T</span>
    <span style="--i:5">a</span>
    <span style="--i:6">v</span>
    <span style="--i:7">e</span>
    <span style="--i:8">r</span>
    <span style="--i:9">n</span>
    <span style="--i:10">a</span>
</div>

.wave {
  position: relative;
  -webkit-box-reflect: below -12px linear-gradient(transparent, rgba(0, 0, 0, .2));
}
.wave span {
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 6em;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(.1s*var(--i));
}
@keyframes animate {
  0% {
      transform: translateY(0px);
  }
  20% {
      transform: translateY(-20px);
  }
  40%,
  100% {
      transform: translateY(0px);
  }
}

<div class="main">
    <div class="circle"></div> 
    <div class="circle"></div> 
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div> 
</div>

body {
    background-color: #242834;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
} 
.main {
    display: flex;
    width: 200px;
    justify-content: space-between; 
    align-items: center;
} 
.circle {
    width: 20px;
    height: 20px; 
    background: linear-gradient(#7864f4, #3072d3); 
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle:before {
    content: "";
    width: 20px;
    height: 20px;
    background: linear-gradient(#7864f4, #3072d3); 
    border-radius: 50%;
    opacity: 0.7;
    animation: loading 2s;
    animation-iteration-count: infinite;
}
@keyframes loading {
    100% {
        transform: scale(3); 
        opacity: 0;
    }
}
.circle:nth-child(2):before { 
    animation-delay: 0.3s;
} 
.circle:nth-child(3):before { 
    animation-delay: 0.6s;
}
.circle:nth-child(4):before { 
    animation-delay: 0.9s;
}
.circle:nth-child(5):before { 
    animation-delay: 1.2s;
}