<div class="chain">
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
  <div class="chain-dot"></div>
</div>

.chain {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chain-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  animation: chain 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
}
.chain-dot:nth-child(1) {
  background: #7c6cff;
  animation-delay: 0s;
}
.chain-dot:nth-child(2) {
  background: #ff6c8a;
  animation-delay: 0.18s;
}
.chain-dot:nth-child(3) {
  background: #2ecc8a;
  animation-delay: 0.36s;
}
.chain-dot:nth-child(4) {
  background: #f5a623;
  animation-delay: 0.54s;
}
@keyframes chain {
  0%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chain,
  .chain * {
    animation: none !important;
  }
}