.loader {
  --loader-color: #00f0ff;
  --loader-size: 2.5rem;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cyan { --loader-color: #00f0ff; }
.pink { --loader-color: #ff00ff; }
.green { --loader-color: #00ff88; }
.purple { --loader-color: #a855f7; }

.sm { --loader-size: 1.5rem; }
.md { --loader-size: 2.5rem; }
.lg { --loader-size: 4rem; }

/* Spinner */
.spinner {
  width: var(--loader-size);
  height: var(--loader-size);
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--loader-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  box-shadow: 0 0 10px var(--loader-color);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Dots */
.dots {
  gap: 0.5rem;
}

.dot {
  width: calc(var(--loader-size) / 4);
  height: calc(var(--loader-size) / 4);
  background: var(--loader-color);
  border-radius: 50%;
  animation: dot-bounce 1.4s ease-in-out infinite;
  box-shadow: 0 0 10px var(--loader-color);
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Bars */
.bars {
  gap: 0.25rem;
  height: var(--loader-size);
}

.bar {
  width: calc(var(--loader-size) / 6);
  height: 100%;
  background: var(--loader-color);
  animation: bar-stretch 1.2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--loader-color);
}

.bar:nth-child(1) { animation-delay: 0s; }
.bar:nth-child(2) { animation-delay: 0.1s; }
.bar:nth-child(3) { animation-delay: 0.2s; }
.bar:nth-child(4) { animation-delay: 0.3s; }

@keyframes bar-stretch {
  0%, 40%, 100% { transform: scaleY(0.4); }
  20% { transform: scaleY(1); }
}

/* Pulse */
.pulse {
  width: var(--loader-size);
  height: var(--loader-size);
  background: var(--loader-color);
  border-radius: 50%;
  animation: pulse-grow 1.5s ease-in-out infinite;
}

@keyframes pulse-grow {
  0% { transform: scale(0.5); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Hexagon */
.hexagon {
  width: var(--loader-size);
  height: var(--loader-size);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: conic-gradient(from 0deg, var(--loader-color), transparent);
  animation: spin 1.5s linear infinite;
}