/* CSS Loader Generator — preview styles */

/* Spinner */
.loader-spinner {
  border-style: solid;
  border-radius: 50%;
  border-top-color: transparent !important;
  animation: spin linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Dots */
.loader-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.loader-dots span {
  border-radius: 50%;
  animation: bounce 0.6s ease-in-out infinite alternate;
}
.loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-12px); } }

/* Bars */
.loader-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}
.loader-bars span {
  border-radius: 3px;
  animation: bar 0.8s ease-in-out infinite alternate;
}
.loader-bars span:nth-child(2) { animation-delay: 0.15s; }
.loader-bars span:nth-child(3) { animation-delay: 0.3s; }
.loader-bars span:nth-child(4) { animation-delay: 0.45s; }
@keyframes bar { from { transform: scaleY(0.4); } to { transform: scaleY(1); } }

/* Pulse */
.loader-pulse {
  border-radius: 50%;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.4); opacity:0.5; } }

/* Ring */
.loader-ring {
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
  animation: ring linear infinite;
}
@keyframes ring { to { transform: rotate(360deg); } }