CSS 로딩 스피너 모음

/* 1. 원형 스피너 */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(88, 166, 255, 0.2);
  border-top-color: #58a6ff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 2. 점 3개 (Bouncing Dots) */
.dots { display: flex; gap: 6px; align-items: center; }
.dots span {
  width: 8px; height: 8px;
  background: #58a6ff; border-radius: 50%;
  animation: bounce 1.2s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: 0.2s; }
.dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* 3. 진행 바 (Progress Bar) */
.progress-bar {
  width: 200px; height: 4px;
  background: rgba(88, 166, 255, 0.2);
  border-radius: 2px; overflow: hidden;
}
.progress-bar::after {
  content: '';
  display: block; height: 100%; width: 40%;
  background: #58a6ff; border-radius: 2px;
  animation: progress 1.2s ease-in-out infinite;
}
@keyframes progress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* 4. 펄스 (Pulse) */
.pulse {
  width: 36px; height: 36px;
  background: #58a6ff; border-radius: 50%;
  animation: pulse 1.4s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2);   opacity: 0; }
}

/* 5. 스켈레톤 로더 */
.skeleton {
  background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
.skeleton-text   { height: 1em;    width: 80%; margin-bottom: 0.5rem; }
.skeleton-text.sm{ width: 60%; }
.skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; }
.skeleton-image  { width: 100%; height: 200px; border-radius: 8px; }
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 유틸리티: 크기 */
.spinner-sm { width: 20px; height: 20px; border-width: 2px; }
.spinner-lg { width: 52px; height: 52px; border-width: 4px; }

/* 유틸리티: 색상 */
.spinner-success { border-color: rgba(63,185,80,0.2); border-top-color: #3fb950; }
.spinner-danger  { border-color: rgba(248,81,73,0.2);  border-top-color: #f85149; }
.spinner-white   { border-color: rgba(255,255,255,0.3); border-top-color: #fff; }