<svg viewBox="0 0 100 100">
    <rect class="bar bar1" x="8" y="10" rx="4" height="40" width="8" fill="#3498db" />
    <rect class="bar bar2" x="28" y="10" rx="4" height="40" width="8" fill="#3498db" />
    <rect class="bar bar2" x="48" y="10" rx="4" height="40" width="8" fill="#3498db" />
  <h3>Animated bars</h3>

body {
  display: flex;
  background: #e7e7e7;
  justify-content: center;
  align-items:center;
  min-height: 100vh;
}

svg {
  width: 100px;
  height: 100px;
}
.bar1 {
  animation: bars 0.3s 0s linear infinite alternate;
}
.bar2 {
  animation: bars 0.3s 0.3s linear infinite alternate;
}
.bar3 {
  animation: bars 0.3s 0.45s linear infinite alternate;
}
@keyframes bars {
  0% {
    height: 40px;
    y: 10px;
  }
  100% {
    height: 10px;
    y: 40px;
  }
}


h3 {
  padding: 30px;
}