⏳ Dots Loader

<div class="dots-bouncing">
  <span></span>
  <span></span>
  <span></span>
</div>

.dots-bouncing {
  display: flex;
  gap: 0.5rem;
}
.dots-bouncing span {
  width: 12px;
  height: 12px;
  background: #667eea;
  border-radius: 50%;
  animation: bounce 1.4s ease-in-out infinite;
}
.dots-bouncing span:nth-child(1) { animation-delay: 0s; }
.dots-bouncing span:nth-child(2) { animation-delay: 0.2s; }
.dots-bouncing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce {
  0%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
}

<div class="dots-pulsing">
  <span></span>
  <span></span>
  <span></span>
</div>

.dots-pulsing {
  display: flex;
  gap: 0.75rem;
}
.dots-pulsing span {
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}
.dots-pulsing span:nth-child(1) { animation-delay: 0s; }
.dots-pulsing span:nth-child(2) { animation-delay: 0.3s; }
.dots-pulsing span:nth-child(3) { animation-delay: 0.6s; }
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
}

<div class="dots-gradient">
  <span></span>
  <span></span>
  <span></span>
</div>

.dots-gradient {
  display: flex;
  gap: 0.5rem;
}
.dots-gradient span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  animation: fade 1.2s ease-in-out infinite;
}
.dots-gradient span:nth-child(1) {
  background: #667eea;
  animation-delay: 0s;
}
.dots-gradient span:nth-child(2) {
  background: #764ba2;
  animation-delay: 0.2s;
}
.dots-gradient span:nth-child(3) {
  background: #f093fb;
  animation-delay: 0.4s;
}
@keyframes fade {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}