Loading Spinner

/* Modern Loading Spinners */

/* Spinner 1: Circle Spinner */
.spinner-circle {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Spinner 2: Dots */
.spinner-dots {
  display: flex;
  gap: 8px;
}

.spinner-dots span {
  width: 12px;
  height: 12px;
  background: #667eea;
  border-radius: 50%;
  animation: dot-bounce 1.4s infinite ease-in-out both;
}

.spinner-dots span:nth-child(1) { animation-delay: -0.32s; }
.spinner-dots span:nth-child(2) { animation-delay: -0.16s; }

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

/* Spinner 3: Pulse Ring */
.spinner-pulse {
  position: relative;
  width: 48px;
  height: 48px;
}

.spinner-pulse::before,
.spinner-pulse::after {
  content: '';
  position: absolute;
  border: 3px solid #667eea;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  animation: pulse-ring 1.5s ease-out infinite;
}

.spinner-pulse::after {
  animation-delay: 0.75s;
}

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

/* Spinner 4: Bars */
.spinner-bars {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 40px;
}

.spinner-bars span {
  width: 6px;
  height: 100%;
  background: #667eea;
  border-radius: 3px;
  animation: bar-stretch 1.2s ease-in-out infinite;
}

.spinner-bars span:nth-child(1) { animation-delay: -0.4s; }
.spinner-bars span:nth-child(2) { animation-delay: -0.3s; }
.spinner-bars span:nth-child(3) { animation-delay: -0.2s; }
.spinner-bars span:nth-child(4) { animation-delay: -0.1s; }

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

/* Spinner 5: Gradient Circle */
.spinner-gradient {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 270deg,
    #667eea 270deg 360deg
  );
  animation: spin 1s linear infinite;
  position: relative;
}

.spinner-gradient::before {
  content: '';
  position: absolute;
  inset: 4px;
  background: white;
  border-radius: 50%;
}

/* Tailwind CSS Version */
@layer components {
  .spinner-border {
    @apply w-12 h-12 border-4 border-gray-200 border-t-purple-600 rounded-full;
    animation: spin 1s linear infinite;
  }
  
  .spinner-dots-tw {
    @apply flex gap-2;
  }
  
  .spinner-dots-tw span {
    @apply w-3 h-3 bg-purple-600 rounded-full;
    animation: dot-bounce 1.4s infinite ease-in-out both;
  }
  
  .spinner-pulse-tw {
    @apply relative w-12 h-12;
  }
  
  .spinner-pulse-tw::before,
  .spinner-pulse-tw::after {
    @apply content-[''] absolute border-2 border-purple-600 rounded-full w-full h-full;
    animation: pulse-ring 1.5s ease-out infinite;
  }
}

/* Usage Example HTML */
/*
<!-- Circle Spinner -->
<div class="spinner-circle"></div>

<!-- Dots -->
<div class="spinner-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

<!-- Pulse Ring -->
<div class="spinner-pulse"></div>

<!-- Bars -->
<div class="spinner-bars">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<!-- Gradient Circle -->
<div class="spinner-gradient"></div>

<!-- Tailwind Version -->
<div class="spinner-border"></div>
*/